前端屏蔽中文输入法(input输入框type=“password

2021-05-31  本文已影响0人  遇而记起

1、input输入框如果type=password能满足我们的需求,但是是密文,我们要明文显示,实现源码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>屏蔽输入法</title>

</head>

<style>

  body{

    background-color:rgb(220, 220, 255);

  }

  #password,#clear{

    position: absolute;

  }

  #password{

    opacity: 0;

    border: 0px;

    width: 1px;

    z-index: 999;

  }

  #clear{

    outline: none;

    color:rgb(214, 124, 6);

    width: 95%;

    background-color: rgba(255, 255, 255, 0.2);

    border: none;

    height: 40px;

    text-indent: 15px;

    border-radius: 5px;

  }

</style>

<body>

    <input type="password" id="password"/>

    <input type="text" placeholder="请扫描输入内容" id="clear" />

</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<script>

//聚焦clear

$('#clear').focus();

//监听clear输入框

$('#clear').bind('input propertychange', function()

{

  //聚焦password

  $('#password').focus();

  //将clear赋值给password

  $('#password').val($("#clear").val());

  //延迟200毫秒聚焦clear

  setTimeout(function(){

            $("#clear").focus();

        }, 200)

})

//监听password输入框

$('#password').bind('input propertychange', function()

{

  //将password赋值给clear

  $('#clear').val($("#password").val());

  //延迟200毫秒聚焦clear

  setTimeout(function(){

            $("#clear").focus();

        }, 200)

})

</script>

</html>

上一篇下一篇

猜你喜欢

热点阅读