Question

我想知道是否有人可以指出我可能满足我的要求的主题或代码。问题我有一个函数（在这个阶段只是改变颜色）我想为每个有焦点的输入字段运行。我没有任何代码要发布，所以我将在这里使用伪代码来描述问题：

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";

我想过使用一个带有每个字段ID的开关，我试过了：

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

我的输入字段具有onfocus属性

<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>

功能

            <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";
         }
    }
}

这里是querySelectorAll的一个示例（假设您的输入位于id为input-container的div中）：

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

理想情况下，你想在焦点上设置背景黄色，这样的东西会更好（在焦点上它将它设置为黄色，在模糊时它将其设置为无）：

<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"/>

我想在一系列输入字段上使用一个函数

1 个答案: