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/

两个问题

从textfield删除值时，输出窗口不会更新它或离开最后一个单词。
我尝试了很多东西，将输出添加到文本字段右侧的浮动，但它显示在文本字段的底部。

需要帮助。

Answer 1

第一个问题是当输入为空时，调用.val()返回false，因此#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;
}

从文本字段动态收集文本

1 个答案: