jQuery/javascript检查键盘触摸上的输入字段

Question

我一直在谷歌搜索以获取答案，但是我找不到想要的东西。不知道我是否键入我的问题，但我会尝试解释。

我要实现的目标是：一旦用户类型，我希望我的脚本运行，因此我的按钮可以在两个密码相等时启用。一旦密码与彼此相等，将启用该按钮。如果没有，将禁用该按钮。

function test123() {
       var pw1 = $('#pw1').val();
       var pw2 = $('#pw2').val();
       if (pw1 == pw2) {
             console.log('Valid!');
         } else {
             console.log('Not valid!');
         }
         }

<div id='register-div'>
       <form method='POST' action='javascript:test123()'>
           <input name='username' type='text' placeholder='username'>
           <input id='pw1' name='password' type='password' placeholder='password'>
           <input id='pw2' name='password2' type='password' 
           placeholder='password_again'>
           <button type='submit'><a> REGISTER </a></button>
   </form>
   </div>

Answer 1

为了实现此目的，您可以使用Unbrotruse JS将input事件绑定到密码字段。然后，如果值使用prop('disabled')匹配值，则可以启用/禁用按钮，例如：

$('#pw1, #pw2').on('input', function() {
  var pw1 = $('#pw1').val();
  var pw2 = $('#pw2').val();
  $('button').prop('disabled', pw1 != pw2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="register-div">
  <form method="POST">
    <input name="username" type="text" placeholder="username">
    <input id="pw1" name="password" type="password" placeholder="password">
    <input id="pw2" name="password2" type="password" placeholder="password_again">
    <button type="submit" disabled="true">REGISTER</button>
  </form>
</div>

还请注意，我删除了您放置在<button>中的<a>元素，因为这不是有效的HTML。

Answer 2

    $('#pw1,#pw2').keyup( function() {
    test123();
});
    function test123() {
           var pw1 = $('#pw1').val(),
             pw2 = $('#pw2').val();
           if (pw1 == pw2) {
                $('button').prop('disabled',false)
             } else {
                $('button').prop('disabled',true)
             }
             }

Answer 3

检查此代码：

function test123() {
       var pw1 = $('#pw1').val();
       var pw2 = $('#pw2').val();
       if (pw1 == pw2) {
             document.getElementById("submit_btn").disabled = false;  
         } else {
             document.getElementById("submit_btn").disabled = true;  
         }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='register-div'>
       <form method='POST' action='javascript:test123()'>
           <input name='username' type='text' placeholder='username'>
           <input id='pw1' name='password' type='password' placeholder='password'>
           <input id='pw2' name='password2' type='password' 
           placeholder='password_again' onkeyup='test123()'>
           <button type='submit' id='submit_btn' disabled><a> REGISTER </a></button>
   </form>
   </div>

Answer 4

$('button').prop('disabled', true)
$('input.pass').on('input', function() {
  var pw1 = $('#pw1').val()
  var pw2 = $('#pw2').val()
  if (pw1 == pw2) {
    $('button').prop('disabled', false)
  } else {
    $('button').prop('disabled', true)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='register-div'>
  <form method='POST' action='javascript:test123()'>
    <input name='username' type='text' placeholder='username'>
    <input class="pass" id='pw1' name='password' type='password' placeholder='password'>
    <input class="pass" id='pw2' name='password2' type='password' placeholder='password_again'>
    <button type='submit'><a> REGISTER </a></button>
  </form>
</div>

1. 与同一类通过的输入上添加事件处理程序
2. 使用事件input

Answer 5

function test123() {
   var pw1 = $('#pw1').val();
   var pw2 = $('#pw2').val();
   if (pw1 == pw2) {
	 $('button').prop('disabled',false)
   } else {
	  $('button').prop('disabled',true)
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id='register-div'>
	<form method='POST' action=''>
		<input name='username' type='text' placeholder='username'>
		<input id='pw1' onkeyup="return test123();" name='password' type='password' placeholder='password'>
		<input id='pw2' onkeyup="return test123();" name='password2' type='password' placeholder='password_again'>
		<button disabled type='submit'><a> REGISTER </a></button>
	</form>
</div>

Answer 6

简单...您可以使用OnkeyPress事件

https://www.w3schools.com/jsref/event_onkeypress.asp