通过inputfield

时间:2016-10-17 08:38:32

标签: javascript jquery html

有没有办法在输入字段中输入某个值时动态更新按钮文本。

<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>

我想更新按钮文字&#34;立即付款&#34;使用在id =&#34; amount-field&#34;

的输入字段中输入的值

我知道我应该使用onKeyUp,但是我对如何编写这段代码一无所知。任何帮助都非常感谢。

5 个答案:

答案 0 :(得分:1)

这是你要做的事吗?

&#13;
&#13;
$('.myName').keyup(function(){
  if ($(this).val()==""){
   $('button').text("Pay Now")
 }else{
   $('button').text($(this).val());
 }
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="myName">
<button>sample</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您在寻找这个:

  

如果要附加文本,则最好使用其他内联标记   像span。

&#13;
&#13;
$('#amount-field').keyup(function() {
    var keyed = $(this).val();
    $("#rzp-button1 span").text("- "+keyed); // you can remove "-" 
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now <span></span></button>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您是对的,您可以使用keyup事件来实现此目标。

&#13;
&#13;
document.getElementById('amount-field').addEventListener('keyup', function() {
  document.getElementById('rzp-button1').innerText = 'Pay Now ' + this.value;
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>
&#13;
&#13;
&#13;

正如您使用jQuery标记了问题,以下是如何使用jQuery实现它

&#13;
&#13;
$(function() {
  $('#amount-field').keyup(function() {
    $('#rzp-button1').text('Pay Now ' + this.value);
  }); 
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

在这里,

$("#amount-field").keyup(function(){
   var value = $(this).val();

   $("#rzp-button1").text(value);
});

答案 4 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#amount-field").keyup(function(){
       $('#rzp-button1').text($(this).val());
    });
});
</script>
</head>
<body>

<input class="paymentinput w-input" type="tel" placeholder="0" id="amount-field">
<button id="rzp-button1" class="paynowbutton w-button">Pay Now</button>
</body>
</html>