2

JavaScript を使用した HTML5 プレースホルダーの代替のようなコードを書きましたが、機能しません。私が理解できる限り（jsの平凡な知識で）、すべてが機能するはずですが、そうではありません。助けてください！！！これが私のコードです：

JavaScript:

(function(){
    var field = document.getElementById('placeholder');
    var placeholdertext = "Search box"; // << change this to whatever you want the placeholder text to be

    field.setAttribute("onblur", "if(value=='') { value = '" + placeholdertext + "'")
    field.setAttribute("onfocus", "if(value=='" + placeholdertext + "') { value = '' }")
})();

HTML

<input type="search" value="Search box" id="placeholder">

編集：

jQuery や inline-html-coding は使いたくありません。助けてくれてありがとう、みんな!!!

4

4 に答える 4

2

valueコード内をに置き換えthis.valueます (グローバル変数ではなく、イベントをトリガーする要素の値を確認する必要があるため)。

補足として、おそらくplaceholderここでも属性を使用し、それをサポートしていないブラウザーにのみ JS shim を提供することをお勧めします。これにより、DOM 関連のデータを格納するためだけに変数を使用する必要がないため、javascript コード部分も簡素化されます。

field.onblur = function() {
  if (this.value === '') {
    this.value = this.getAttribute('placeholder');
  }
};

field.onfocus = function() {
  if (this.value === this.getAttribute('placeholder') ) {
    this.value = '';
  }
};

...そして実際には、この回答で説明されているように、addEventListener/attachEventの代わりにここを使用することをお勧めします。onblur/onfocus

于 2012-11-05T01:03:27.823 に答える
1

jQuery を使用しない場合:

field.onblur = function() {
  if (field.value == '') {
    field.value = placeholdertext;
  }
};

field.onfocus= function() {
  if (field.value == placeholdertext ) {
    field.value = '';
  }
};
于 2012-11-05T01:03:45.973 に答える
0

私はこれをテストしていませんが、あなたの質問を理解していれば、これはうまくいくはずです。機能する場合は、チェックマークを押すことを忘れないでください。

    var field = document.getElementById('placeholder');
    var placeholdertext = "Search box";

    field.bind('onblur', function() {
        if (field.text() === '') {
            field.text(placeholdertext);
        }
    });

    field.bind('onfocus', function() {
        if (field.text() === '') {
            field.text(placeholdertext);
        }
    });
于 2012-11-05T01:00:32.237 に答える