用于多个字段的JavaScript onBlur

时间:2015-10-31 21:41:52

标签: javascript

我有一个由许多文本输入字段组成的表,用户可以为其分配值。我的目标是,如果用户“onBlur” 任何 字段,则会激活一个函数。我可以通过单独标记每个单元格来解决问题,但是它会非常重复,并且我确信有更有效的解决方法。

演示:

<table>
  <tr>
    <td>I</td>
    <td><input type="text" id="whatever1"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input type="text" id="whatever2"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input type="text" id="whatever3"></td>
  </tr>
</table>

使用JS:

var e1 = document.getElementById('whatever1');
e1.onblur = alias;

function alias()  {
    alert('started');   
}

然后再为每个输入框重复2次。或者希望有一种更简单的方法。

4 个答案:

答案 0 :(得分:2)

您可以委派事件并将侦听器放在包含元素上:

var e1 = document.getElementById('containing-table');
e1.addEventListener('blur', function(e){
    alert(e.target);
}, true);

和修改后的html:

<table id="containing-table">
  <tr>
    <td>I</td>
    <td><input type="text" id="whatever1"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input type="text" id="whatever2"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input type="text" id="whatever3"></td>
  </tr>
</table>

这是一个小提琴:http://jsfiddle.net/oj2wj1d6/7/

这样做的好处是您可以实际删除和添加输入元素,并且侦听器将捕获新节点上的事件。您可以在addEventListener中的函数内添加条件语句,以便进一步过滤您希望如何响应不同类型的事件目标。

使用jQuery,你可以做一些简单的事情:

$("table").on("blur", "input", function(e){
    alert(e.target);
});

了解更多内容的一些有用文档:

答案 1 :(得分:1)

<table>
  <tr>
    <td>I</td>
    <td><input class="blurMe" type="text" id="whatever1"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input class="blurMe" type="text" id="whatever2"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input class="blurMe" type="text" id="whatever3"></td>
  </tr>
</table>

然后在javascript中

//inputs as NodeList
var inputs = document.querySelectorAll(".blurMe");
//Convertion to Array
var inputsArr = Array.prototype.slice.call(input);
// Loop to asign event
   inputsArr.forEach(function(item){
      item.onBlur = alias;
   });

答案 2 :(得分:0)

为所有元素添加一个公共类,并将其用于select all元素getElementByClassname。如果你想查看确切的内容,如果你的curent元素添加参数event你的函数。和e.target给你DOM元素。

答案 3 :(得分:0)

怎么样?

<script>
    document.getElementById()
    var arr = document.getElementsByClassName('whatever');
    for(var i=0;i<arr.length;i++)
    {
        arr[i].onblur=alias;
    }
function alias()  {
    alert('started');   
}
</script>
<table>
  <tr>
    <td>I</td>
    <td><input type="text" class="whatever"></td>
  </tr>
  <tr>
    <td>Love</td>
    <td><input type="text" class="whatever"></td>
  </tr>
  <tr>
    <td>Stack Overflow</td>
    <td><input type="text" class="whatever"></td>
  </tr>
</table>