Question

我有一个文本框和一个标签。如果用户想要更改标签文本，则他/她必须在文本框中输入文本。每次用户在更改文本框中输入时，如何更新标签文本？

我知道可以将AJAX用于jQuery和PHP。有没有更简单的方法？请告诉我。这是我的代码和链接：http://jsfiddle.net/uQ54g/1/

$('#change1').change(function(){
    var l = $(this).val();
    $('label').replaceWith(l);


});

Answer 1

首先，您必须使用.text或.html在jquery中的标签内设置文本。您当前的代码实际上将删除label元素并仅替换为text。因此，如果您尝试再次编辑该值，它将不再有效。您还可能希望在标签上添加类或ID，因为您很可能在页面上有多个标签。

HTML：

<input type="text" id="change1"/><br/>
<label id="test">Hello</label>

使用Javascript：

$('#change1').change(function(){
    var l = $(this).val();
    $('#test').text(l);
    // OR $('#test').html(l);
});

如果您想在输入每个字符后更改标签，则需要使用keyup代替change。

这是更新的jsfiddle

Answer 2

你在小提琴中的代码正如我在评论中提到的那样正常工作，或者你可以使用keyup之类的

$('#change1').keyup(function(){
var l = $(this).val();
$('label').text(l);
//alert($('#change1').val())
});

http://jsfiddle.net/uQ54g/4/

另请注意，当您使用replaceWith时，它会替换匹配的元素，在您触发更改后label，<label>hello</label>将替换为Changed Text因此，如果再次执行$("label")，则会返回未定义的see it for yourself

Answer 3

试试这个：

$('#change1').keyup(function(){
l=$(this).val()
$('label').html(l)
})

Answer 4

将此与jquery库

一起使用

$('#change1').on('keyup',function(){ //Change1 is id of textbox
   $('#label1').html($(this).val()) //label1 is the id of the label
});
$('#change1').blur(function() { //if we copy paste some text into the textbox it will also work if use this blur and trigger function
   $(this).trigger('keyup');
});

Answer 5

这个怎么样

$('#change1').change(function(item){
     $('label').text(item.target.value);
});

如何在jQuery中更改标签文本？

5 个答案: