通过inputfield更新按钮文本

Update button text through inputfield

本文关键字：文本 按钮 更新 inputfield 通过      更新时间：2023-09-26

是否有一种方法可以动态地更新按钮文本，而一些值正在输入一个输入字段

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

我想用id="amount-field"输入字段中输入的值更新按钮文本"Pay Now"

我知道我应该为此使用onKeyUp，但我对如何编写此代码有点无能为力。

这是你想要的吗?

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

您是对的，您可以使用keyup事件来实现这一点。

document.getElementById('amount-field').addEventListener('keyup', function() {
  document.getElementById('rzp-button1').innerText = 'Pay Now ' + this.value;
});
<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>

你已经用jQuery标记了这个问题，下面是如何使用jQuery实现它

$(function() {
  $('#amount-field').keyup(function() {
    $('#rzp-button1').text('Pay Now ' + this.value);
  }); 
});
<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>

在这里，

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

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

你在找这个吗?

如果你想附加文本，那么最好使用另一个内联标签像。

$('#amount-field').keyup(function() {
    var keyed = $(this).val();
    $("#rzp-button1 span").text("- "+keyed); // you can remove "-" 
});
<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>

相关文章：