有没有办法在输入字段中输入某个值时动态更新按钮文本。
<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,但是我对如何编写这段代码一无所知。任何帮助都非常感谢。
答案 0 :(得分:1)
这是你要做的事吗?
$('.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;
答案 1 :(得分:0)
您在寻找这个:
如果要附加文本,则最好使用其他内联标记 像span。
$('#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;
答案 2 :(得分:0)
您是对的,您可以使用keyup
事件来实现此目标。
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实现它
$(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;
答案 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>