Question

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

<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，但是我对如何编写这段代码一无所知。任何帮助都非常感谢。

Answer 1

这是你要做的事吗？

＆＃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;

Answer 2

您在寻找这个：

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

＆＃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;

Answer 3

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

＆＃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;

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

＆＃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;

Answer 4

在这里，

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

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

Answer 5

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

通过inputfield

5 个答案: