jQuery实时更新按钮文本值

我正在尝试使用"文本框值"进行实时更新"按钮文本值"，并且似乎无法弄清此代码的问题，我缺少什么？

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
  $('#TextBox').keypress(function(e){
    var val=this.value;
    $('#Button').val(val);
  });
});//]]> 
</script>
<body>
<input id="TextBox" type="text" value="" />
<br /><br />
<input id="Button" type="button" value="Button" />
</body>
</html>

load()方法在jQuery版本中弃用1.8并在3.0中删除，因此请使用文档Ready Handler。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    $('#TextBox').keypress(function(e) {
      var val = this.value;
      $('#Button').val(val);
    });
  }); //]]>
</script>
<input id="TextBox" type="text" value="" />
<br />
<br />
<input id="Button" type="button" value="Button" />

fyi：尽管您可以使用input或keyup事件而不是keypress事件，这会更好。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    $('#TextBox').keyup(function(e) {
      var val = this.value;
      $('#Button').val(val);
    });
  }); //]]>
</script>
<input id="TextBox" type="text" value="" />
<br />
<br />
<input id="Button" type="button" value="Button" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    $('#TextBox').on('input', function(e) {
      var val = this.value;
      $('#Button').val(val);
    });
  }); //]]>
</script>
<input id="TextBox" type="text" value="" />
<br />
<br />
<input id="Button" type="button" value="Button" />

相关内容

最新更新

热门标签：