Question

我试图更新＆＃34;按钮文字值＆＃34;使用＆＃34;文本框值＆＃34;并且似乎无法弄清楚这段代码的问题，我错过了什么？

<!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>

Answer 1

jQuery版本1.8中不推荐使用load()方法，3.0已将其删除，因此请使用document 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" />

仅供参考：虽然您可以使用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" />

jQuery实时更新按钮文本值

1 个答案: