jQuery实时更新按钮文本值

时间:2016-12-17 18:10:12

标签: javascript 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>

1 个答案:

答案 0 :(得分: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" />

仅供参考:虽然您可以使用inputkeyup事件代替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" />