1. ホーム
  2. javascript

[解決済み] 入力時のデフォルトテキスト

2022-03-10 05:52:30

質問

入力フィールドに空白のデフォルトテキストを設定し、要素がアクティブになったときにそれをクリアするにはどうすればよいですか。

どのように解決するのですか?

モダンブラウザでは placeholder 属性を使用すると、デフォルトのテキストを設定できます。

<input type="text" placeholder="Type some text" id="myField" />

ただし、古いブラウザでは、JavaScriptを使用して、フォーカスイベントとブラーイベントを捕捉することができます。

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

デモの様子 http://jsbin.com/utecu