web-dev-qa-db-ja.com

HTMLテキスト入力ボックスの「デフォルト」値を設定します。 ESCをクリックしたときに値を元に戻す

Webフォームがブラウザに書き込まれると、ブラウザはテキスト入力ボックスの初期値を記憶します。すなわち。次のようなHTMLを受信すると：

<input type="text" value="something">

ブラウザは、初期値/デフォルト値として「何か」を記憶しています。ユーザーが入力を開始し、ESCを押すと、ブラウザーはフィールドを初期値に戻します（もちろん、最初に空白だった場合は空白にします）。

ただし、テキスト入力ボックスをプログラムで作成する場合、ESCを押すと、次のようなデフォルト値で作成した場合でも、常にボックスが空白になります。

$('<input type="text" value="something">')

ブラウザはこれをデフォルト値としてカウントせず、ESCを押したときに元に戻りません。だから私の質問は、コード内にテキストボックスを作成し、何らかの方法でデフォルト値を割り当てる方法があるので、ESCキーはブラウザがHTMLドキュメントでそれを受け取ったかのように機能しますか？

htmlinputdefaultplaceholder
23
ingredient_15939

このescの動作はIEのみです。jQueryを使用する代わりに、要素を作成するために古き良きjavascriptを使用すると動作します。

var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);

http://jsfiddle.net/gGrf9/

この機能を他のブラウザーに拡張する場合は、jQueryのデータオブジェクトを使用してデフォルトを保存します。次に、ユーザーがエスケープを押したときに設定します。

//store default value for all elements on page. set new default on blur
$('input').each( function() {
    $(this).data('default', $(this).val());
    $(this).blur( function() { $(this).data('default', $(this).val()); });
});

$('input').keyup( function(e) {
    if (e.keyCode == 27) { $(this).val($(this).data('default')); }
});
8
mrtsherman

空のときに入力フィールドにグレーのテキストを表示するplaceholder属性を探しているかもしれません。

Mozilla Developer Network： から

コントロールに入力できるもののユーザーへのヒント。プレースホルダーテキストには、キャリッジリターンまたはラインフィードを含めることはできません。この属性は、type属性の値がtext、search、tel、url、またはemailの場合に適用されます。それ以外の場合は無視されます。

ただし、これはかなり新しいタグなので（HTML5仕様afaikから）、このソリューションでターゲットオーディエンスが問題ないことを確認するために、ブラウザテストを行うことをお勧めします。
（このタグがチャームのように機能するため、ブラウザをアップグレードするように伝えない場合; o））

そして最後に、アクションで直接それを見るためのミニフィドル： http://jsfiddle.net/LnU9t/

編集：これは、エスケープキーストロークが検出された場合に入力フィールドもクリアする単純なjQueryソリューションです。 http://jsfiddle.net/3GLwE/

40
nuala

質問が「ESCに価値を追加することは可能か」という答えであれば、答えはイエスです。あなたはそのようなことをすることができます。たとえば、jQueryを使用すると、次のようになります。

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<input type="text" value="default!" id="myInput" />

JavaScript

$(document).ready(function (){
    $('#myInput').keyup(function(event) {
        // 27 is key code of ESC
        if (event.keyCode == 27) {
            $('#myInput').val('default!');
            // Loose focus on input field
            $('#myInput').blur();
        }
    });
});

作業用ソースはここにあります： http://jsfiddle.net/S3N5H/1/

別の意味をお持ちの場合はお知らせください。後でコードを調整できます。

4
Marek Tuchalski

テキスト入力のdefaultValueプロパティを参照してください。<input type="reset"/>ボタンをクリックしてフォームをリセットするときにも使用されます（ http://www.w3schools.com/jsref/prop_text_defaultvalue.asp ）

btw、defaultValue、およびプレースホルダーテキストは異なる概念であるため、どちらがニーズに合っているかを確認する必要があります

4
Andreas Andreou