Question

我目前有一个跨度，我希望将其值更新为等于输入字段。我知道输入可能是可能的，但是跨度也可能吗？

HTML：

<p style='font-size:150%'>
Hey bro, I am <span id='name_display'>Anonymous</span>，

I'd like to invite you to.....

      <input type="text" class="form-control" name='name' id='name' placeholder="your name">

</p>

使用Javascript：

$(document).ready(function(){
    $("#name").click(function() {
            $("#name_display").val( $("#name").val() );
    });    
});

到目前为止还没有工作。建议赞赏！

Answer 1

你真的很亲近，但有两件事：

span元素没有值，他们有内容。您可以使用text或html
设置该内容
```
$("#name_display").text( $("#name").val() );
// Or
$("#name_display").html( $("#name").val() );
```
text会确保对文字进行HTML编码（因此<以<形式出现），html会将您提供的文字解释为HTML。
当用户点击文本字段时，您需要更新，这是一个奇怪的更新时间。您可以在change上更新（但在用户离开该字段之前不会更新），keypress，input，或者确实是一个组合：
```
$(document).ready(function(){
    $("#name").on("change keypress input", function() {
        $("#name_display").text( $("#name").val() );
    });    
}); 
```

另外，在事件回调中，您挂钩事件的元素将作为this提供给您，因此我们可以在那里稍作修改：

$(document).ready(function(){
    $("#name").on("change keypress input", function() {
        $("#name_display").text( $(this).val() ); // <= Change on this line
    });    
});

Answer 2

尝试使用.html设置范围内容，如下所示：

$(document).ready(function(){
    $("#name").click(function() {
            $("#name_display").html( $("#name").val() );
    });    
});

根据输入更新跨度值

2 个答案: