一連の入力フィールドで1つの関数を使用したい

Question

私の要件を満たす可能性のあるトピックまたはコードを誰かが指摘できるかどうかは疑問です。問題私は、フォーカスを持っている各入力フィールドに対して実行したい機能（この段階では色を変更する）を持っています。私は、問題を説明するためにここに擬似コードを使用しますので、投稿するために、任意のコードを持っていない：私はその中の各フィールドのIDを持つスイッチを使用して考え

input field1 id = aaaa 
input field2 id = bbbb 
input field3 id = cccc 


function onFoc() 
if input field has focus - 
document.getElementById("inputfieldwithfocus").style.background = "yellow"; 

をし、私が試してみました：

var hasfocus = $('a').is(':focus'); to no avail 

私の入力フィールドが

<td><input type="text" name="aaaa" id="aaaa" onfocus="onFoc()" 
     size="15" value="<?php echo $aaaa;?>" maxlength="15"/> 

ポスト編集....コードイムの一部が

<tr> 
    <td>&nbsp;</td> 
     <td>Lastname </td> 
     <td><input type="text" name="p_name" id="p_name" class="inputt" 
onfocus="onFoc()" size="20" 
     maxlength="20" value="<?php echo $p_name;?>" /> 
     </td><td>&nbsp;</td> 
    </tr> 

0を使用してONFOCUS属性を持っています

機能

  <script language="javascript"> 
      function onFoc() { 
    for (var input of document.getElementsByClassName('inputt')) { 
     if (input.hasFocus()) { 
      //Do stuff here 
      input.style.background = "yellow"; 
     } 
    } 

} 

Answer 1

フィールドにクラスを与え、document.getElementsByClassName()を経由して、それらを選択するか、querySelectorAllを使用します。

function updateFocusedInputBackgroundsToYellow() { 
    for (var input of document.getElementsByClassName('inputs')) { 
     if (input.hasFocus()) { 
      //Do stuff here 
      input.style.background = "yellow"; 
     } 
    } 
} 

ここ（のは、あなたの入力はidを持つdiv要素であるとしましょうquerySelectorAllの例です入力容器の）：

function updateFocusedInputBackgroundsToYellow() { 
    for (var input of document.querySelectorAll('#input-container input')) { 
     if (input.hasFocus()) { 
      //Do stuff here 
      input.style.background = "yellow"; 
     } 
    } 
} 

理想的には、フォーカスの黄色の背景、このようなものが良いだろう（焦点で、それは黄色にそれを設定し、ぼかしの上にそれがnoneに設定します）：

<td><input type="text" name="aaaa" id="aaaa" onfocus="this.style.background = 'yellow'" onblur="this.style.background = 'none'" 
    size="15" value="<?php echo $aaaa;?>" maxlength="15"/>