javascript - 从文本字段中动态收集文本

Question

这是html代码

<div id="domTxtEntry">
    <strong>Your Name:</strong>
    <input type="text" name="txtdisplay" id="txtdisplay" value="" class="input" />
    <br />
    <br />

    <div id="domPrv"></div>
</div>

这个jQuery代码

$(document).ready(function () {
    var nameNode = $('#domPrv'),
        name = $('#txtdisplay');
    //comment...easy
    $('#domTxtEntry input').bind('blur keyup', function () {
        //name
        if ($('#txtdisplay').val()) {
            nameNode.text(name.val() + ' modifies this');
        }
    });
});

这是在这个小提琴中。 http://jsfiddle.net/qSq37/1/

两个问题

1. 从文本字段中删除值时，输出窗口不会更新它或留在最后一个单词。
2. 我尝试了很多方法来将输出添加到文本字段的右侧，但它显示在文本字段的底部。

需要帮助。

Answer 1

第一个问题是当输入为空时，调用.val()返回false，所以in的值#txtdisplay没有更新。尝试这个：

$('#domTxtEntry input').bind('blur keyup', function () {
  if ($('#txtdisplay').val()) {
    nameNode.text(name.val() + ' modifies this');
  } else {
    nameNode.text("Default value");
  }
});

您可以像这样解决第二个问题（删除<br />标签）：

<div id="domTxtEntry">
    <strong>Your Name:</strong>
        <input type="text" name="txtdisplay" id="txtdisplay" value="" class="input" />

    <div id="domPrv">Default value</div>
</div>

在 CSS 中：

#domPrv {
  display: inline-block;
}