INPUT 要素があり、以前の値をリセットしたい (元の値は必要ありません)。2 つの方法があります。
- 値を別の変数に保存し、再度引き出します
- ESC キーを押します。しかし、ユーザーに ESC を押してもらいたくありませんが、ボタンをクリックしてもらいたいのです。
#2では、jqueryを使用してESCキーストロークを作成するにはどうすればよいですか?
INPUT 要素があり、以前の値をリセットしたい (元の値は必要ありません)。2 つの方法があります。
#2では、jqueryを使用してESCキーストロークを作成するにはどうすればよいですか?
SSCCEは次のとおりです。
<!doctype html>
<html lang="en">
<head>
<title>SO question 2079185</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(':input.remember').each(function() {
$(this).attr('data-remember', $(this).val());
});
$('button.reset').click(function() {
$(':input.remember').each(function() {
$(this).val($(this).attr('data-remember'));
});
});
});
</script>
</head>
<body>
<input type="text" class="remember" value="foo">
<button class="reset">Reset</button>
</body>
</html>
これは基本的に、オンロード中のクラスを持つすべての入力要素の元の値を保存し、クリックされるたびにそれを復元するrememberようにボタンに指示します。reset
Esc キーは、まだフィールド内にいるときに機能します。
ボタンをクリックした瞬間にフィールドはフォーカスを失い、フィールドに値が保存されるため、デフォルトのブラウザの手順では元に戻すことができません..
言及した#1オプションのみを使用できます..
フィールドのぼかし(フォーカスを失ったときのイベント)では、値を保存する必要があり、ボタンをクリックすると、保存された値に戻ります..
各要素 (input、checkbox、radio) には、要素が初期化されたデフォルト値を含む属性があります。このシナリオは、以前の値では機能しません。
// pseudocode
input.defaultValue;
radio.defaultChecked;
checkbox.defaultChecked;
ESC キーを押してデフォルト値を入力に設定するには:
$(document).ready(function(){
// reset by pressing ESC with focus on input
$('input').keypress(function(e) {
if (e.keyCode == 27) {
this.value = this.defaultValue;
}
});
});
キーストロークなどのイベントを生成することは忘れてください。(移植性のないさまざまな方法で) イベントを作成し、それらをイベント処理システムにルーティングすることはできますが、これは適切なイベント ハンドラー関数が呼び出されるだけです。キーストロークやマウス クリックなど、ユーザーが生成したアクションに対してブラウザがデフォルトのアクションを実行することはありません。
いずれにせよ、Escape でのリセットについて話している動作は IE の癖です。他のブラウザでは Escape は効果がなく、IE でも信頼性がありません。具体的には、通常のフォームでは、Escape を 1 回押すと、最後のフォーカス以降の変更が失われ、Escape を 2 回続けて押すと、フォーム全体が初期値にリセットされます。ただし、フォームに が含ま<input type="reset">れている場合は、Esc キーを 1 回押すとフォームがリセットされ、リセット ボタンがフォーカスされます。これにより、入力したすべてのものを誤って失いやすくなり、フォームにリセット ボタンを含めないもう 1 つの正当な理由になります。
したがって、初期値にリセットしたい場合は、 を呼び出すことができますform.reset()。1つのフィールドだけをリセットしたい場合は、設定できますinput.value= input.defaultValue(またはinput.checked= input.defaultCheckedチェックボックス/ラジオ、および同様defaultSelectedにオプションで)。
ただし、フィールドが最後にフォーカスされたときに存在していた値が必要な場合は、リセット ボタンがないときに IE が動作するため、次のような変数の記憶を行う必要があります。
var undonevalue= $('#undoable').val();
$('#undoable').focus(function() {
undonevalue= $('#undoable').val();
});
$('#undoer').click(function() {
$('#undoable').val(undonevalue);
});