我有一个文本框和一个标签。如果用户想要更改标签文本,他/她必须在文本框中输入文本。每次用户在更改时在文本框中输入时,如何更新标签文本?
我知道将AJAX与jQuery和PHP一起使用是可能的。有没有更简单的方法?请让我知道。这是我的代码和一个链接:http://jsfiddle.net/uQ54g/1/
$('#change1').change(function(){
var l = $(this).val();
$('label').replaceWith(l);
});
首先,你必须使用 .text
或 .html
在 jquery 中设置标签内的文本。您当前的代码实际上将删除标签元素并仅替换为文本。因此,如果您尝试再次编辑该值,它将不再起作用。您可能还希望向标签添加类或 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
正如我在评论中提到的,你的小提琴中的代码工作正常,或者你可以使用这样的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")
它将返回未定义,请自己查看
试试这个:
$('#change1').keyup(function(){
l=$(this).val()
$('label').html(l)
})
将其与 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');
});
这个怎么样
$('#change1').change(function(item){
$('label').text(item.target.value);
});