19

私は以下のようなイベントリスナー構造を使用して、入力ボックスがフォーカスを失ったときにいくつかのことを行います。

しかし、それは機能しません。入力ボックスがその中のカーソルを失った（つまり、ユーザーがその外をクリックした）瞬間を取得するには、どのイベントを聞く必要がありますか？

document.getElementById('div inside which input is located')
    .addEventListener( 'blur',  function(e){
        if(event.target.className=='editInput'){
            doStuff(event.target);
        }
     } , false );
4

4 に答える 4

16

正しいイベントはonBlurです。このコードを見てください：

<!DOCTYPE html>
<html>
  <head>
    <title>element</title>
<script type="text/javascript">
  function message() {
            var text = document.getElementById("test").value;
            alert(text);
    }
</script>
  </head>
  <body>
      <input type="text" name="test" id="test">
<script type="text/javascript">
document.getElementById("test").onblur=message;
</script>
  </body>
</html>

フォーカスを失ったときに機能し、入力の内容を出力します。おそらくあなたのエラーは、イベントを入力ではなくdivに添付したことですか？

于 2012-12-02T10:52:25.900 に答える
6 
var input = document.getElementsByTagName('input')[0];

input.onfocus = function() {
  this.className = 'highlight';
}

input.onblur = function() {
  this.className = '';
}
于 2012-12-02T10:44:19.043 に答える
3

バニラJavascriptを使用してblurイベントのハンドラーを設定します。

このようなコードを使用して、バニラjQueryの特定の要素「test」のblurイベントのハンドラーを設定できます。

document.getElementById("test").onblur= yourEventHandler

質問では、変更なしでイベントハンドラーを使用できます。それがカバーされた部分です。しかし、ここで言うべきことはまだまだあると思います。

大きな絵：

テキスト入力のぼかし/フォーカスイベントは、ブラウザ間の互換性の観点から、最も問題の少ないイベントの1つです。ただし、本格的な開発を行う場合は、jQuery、YUI、Dojo、MooToolsなどのフレームワークを使用することをお勧めします。これらは、より優れたコードの記述に役立ち、互換性の問題から保護します。

残念ながら、Web開発者が直面しなければならない現実は、動作は似ているが同一ではない多くのブラウザの現実です。今書いたコードをテストするときに、たまたま使用しているブラウザで機能するソリューションを見つけるだけでは十分ではありません。アプリケーションが対象としているすべてのブラウザでコードが正しく機能することを確認する必要があります。では、ぼかしを割り当てる方法が、特定の要素の一部のブラウザでは機能しないが、別のブラウザでは機能することに突然気付いた場合はどうなりますか？コードのいたるところに行き、そこにあれば入れますか？このルートに行っても、何も見逃していないと思いますか？そして、別のブラウザで別の問題を見つけた場合、別のif'などを追加しますか？多分あなたは関数を定義することに決めましたsetBlurEventHandlerこれは、ボックスに記載されていることを実行し、上記のようなステートメントの代わりに、コード内のあらゆる場所で使用します。ぼかしイベントのためだけにそれをしますか、それともあなたがするほとんどすべてのためにそれをしますか？他のことにもそれを行うのは理にかなっています。素晴らしい。これで、ブラウザー間で互換性のあるコードを作成するためのフレームワークができました。私たち全員が自分たちのフレームワークを自分たちだけに留めていれば、同じ問題を再発見して修正することに多くの時間を費やすことになります。オープンソースのJavascriptフレームワークを入力してください。他の人が費やした苦労を利用してそれらを使用することができますが、バグを報告したり、コードやドキュメントを作成したりすることで貢献することもできます。これはもっと意味がありませんか？（または、将来のある時点で、非常に巧妙なアイデアに基づいたフレームワークがあると確信している場合でも、不完全ですが、

この点をよりよく理解するために、jQueryのソースから取得したコメントをいくつか紹介します。前に述べたように、テキスト入力のぼかし/フォーカスイベントは、ブラウザー間の互換性の観点から、最も問題の少ないイベントの1つです。しかし、最も基本的で最も問題の少ないイベントの処理でさえそのようなインラインコードドキュメントが付属している場合、コードが処理しなければならないさまざまなブラウザの特性を認識している（または覚えている）ことをどの程度確信していますか？

// IE<9 dies on focus/blur to hidden element (#1486)

// IE doesn't fire change on a check/radio until blur; trigger it on click

// This still fires onchange a second time for check/radio after blur.

上記の理由により、DOMを直接操作することはお勧めしません。

jQueryを使用したより良いアプローチ：

3つの要素でdiv呼び出され、そのうちの1つだけが最初にクラスを持っていたとします。formDivinputeditInput

<div id=formDiv>     
    <input type="text" name="test1" id="test1" />   
    <input type="text" name="test2" id="test2" class='editInput' />    
    <input type="text" name="test3" id="test3" />           
</div>

jQueryを使用すると、次のようなことができます（コードからイベントハンドラーの実際のロジックをコピーしました）。

("#formDiv input").blur(function(){ 
      if(this.className=='editInput'){
          doStuff(this.target);
      }
 });

ここにある他の解決策よりも、あなたがやりたいことに近いと私は信じています。（あなたのコードでは、入力を含むdivにイベントをアタッチしようとしていました。私はあなたの意図を誤解したかもしれませんが、これはあなたが望んでいたことだと思いました。）

このjsFiddleでこのソリューションを試すことができます：http：//jsfiddle.net/r7tuT/3/

いくつかの別れの考え：

これまたはそのフレームワークの方が優れており、正しいかもしれないと言う人がいます。jQueryが最も人気があり、かなりまともだとコメントするだけです。選択はあなた次第ですが、私が言ったように、これらのフレームワークの1つを使用し始めると、作業の質が向上し、一瞬のうちに特定のことを実行して、問題への取り組み方を変えることができます。 。フレームワークまたはプログラミング言語があなたにこれを行うとき、それはコーダーとしてのあなたの人生の素晴らしい瞬間です:-)

于 2012-12-02T11:39:00.820 に答える
-1

onblurの代わりに試してくださいblur。

blurはオブジェクトのフォーカスを失うメソッドですが、onblurはオブジェクトがフォーカスを失ったときに発生するイベントです。

于 2012-12-02T10:42:36.920 に答える