アップデート
適切にフォーマットされた電子メールアドレスを入力するまで入力がロックされているように見えます。その後、要素のロックを解除/フォーカスを外すことができます。他の要素にフォーカスできないunfocus
場合、現在の要素がまだフォーカスされているときにイベントがどのようにトリガーされるのでしょうか。サーバー側の何かに関係していると思いますか?
したがって、サーバーによって生成された入力htmlを持つこのコードがあるためonblur=function()
、タグで直接行うことはできません。代わりに、のonclick
イベントを使用してtd
、イベント ハンドラーを入力にバインドします。
<td id="emailInput" class="label" onclick="emailValidation(event);">
@Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})
</td>
<td id="emailValidate" style="display: none">
<label>Please enter a valid email address</label>
</td>
Javascript ファイルで、次のようにイベント ハンドラーをバインドします。
function emailValidation(e) {
$(e.target).on("blur", function () {
console.log("what target e is");
console.log(e.target);
var inputVal = $(e.target).val();
var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
if (!re.test(inputVal)) {
$(e.target).focus();
$("#emailValidate").css("display", "inline-block");
} else {
$("#emailValidate").css("display", "none");
}
});
}
開発コンソールを確認すると、必要な入力要素は e.target です。起こっていることは、onblur
イベントが追加された後にトリガーされunfocus
、入力要素がフォーカスされなくなっても入力が発生し、画面内のランダムな領域をクリックしているだけです。私は何か誤解していますか?w3school、developer.mozilla、およびこの奇妙な定義よりも優れた定義はありますか?
編集
デモンストレーションのためにJSfiddle(サーバーのものなし)を作成しようとしていましたが、うまく機能したので、詳しく調べてみると、入力要素がunfocus
. どこをクリックしてもカーソルがテキスト領域に残り、他の要素にフォーカスすることはできません。
編集 2
JSFiddleの要求どおりですが、ここでは機能しますが、サーバー側のものでは機能しません