0

これは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/

2つの問題

  1. テキストフィールドから値を削除すると、出力ウィンドウはそれを更新しないか、最後の単語のままにします。
  2. テキストフィールドの右側にフロートする出力を追加するために多くのことを試みましたが、テキストフィールドの下部に表示されます。

ヘルプが必要です。

4

1 に答える 1

3

最初の問題は、入力が空の場合、呼び出し.val()はfalseを返すため、の値#txtdisplayが更新されないことです。これを試して：

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

このように解決できる2番目の問題（<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;
}
于 2013-03-02T13:15:55.180 に答える