javascript - 要素のマウス イベント処理

Question

検索ボックスを作ってみた、ざっくりコーディングはこんな感じ

<table id="searchBox" style="border:1px solid #555;">
 <tr>
  <td>
   <input type="text" style="border:none" id="myTextBox" onclick="makeActive();" />
  </td>
  <td>
   <select onclick="makeActive();">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
   </select>
  </td>
  <td>
   <input type="submit" value="Submit" />
  </td>
 </tr>
</table>

機能

function makeActive() {
 document.getElementById("searchBox").style.border="1px solid #ff0000";
}
function makeUnactive() {
 document.getElementById("searchBox").style.border="1px solid #555";
}

私の要件： コードが言うように、ユーザーがクリックtextboxするかselectbox、テーブルの境界線が変更されたときにそれがsearchbox is Active現在表示されていることを示しており、ユーザーが検索ボックステーブルの外側をクリックしたときに呼び出すfunction makeUnactive()必要があるonblur="makeUnactive();"ため、内で使用しようとしたtextboxため、スクリプトはいつでも呼び出されます私はクリックselectboxするか、Submit Buttonどちらが間違っています:(

---

編集済み

現在は正常に動作していますcheck my answer below How I Did It

---

Answer 1

ああ、私は答えを得ました:D もしそう
なら、それは達成することができます。i don't get Lost Focus from the Text BoxfunctionSelect Box or Submit Button is clickedonblurText Box

function makeFocus() {
 myTextBox.focus();
}

皆様ありがとうございました:*

Answer 2

onfocusプロパティ呼び出しアクティブ関数を使用する必要があります。フィールドを非アクティブにするには、onblurプロパティで非アクティブ関数を呼び出します。

デモ

正常に動作:

HTML

<table id="searchBox" style="border:1px solid #555;">
 <tr>
<td>
<input type="text" style="border:none" onclick="makeActive()" onblur="makeUnactive()"/>
</td>
<td>
<select onclick="makeActive();" onblur="makeUnactive()">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>

JS

function makeActive() {
document.getElementById("searchBox").style.border="1px solid red";}
function makeUnactive() {
document.getElementById("searchBox").style.border="1px solid yellow";
}

Answer 3

CSSだけでやってみる

#id:focus {
    outline: none;
    border: 1px solid #f00;
}