Question

我有一个页面包含多个输入（从后面的代码创建），其中两个需要检查是否为空。

所以我只需创建以下2个输入

<input id='input_1' title='first_input' tabindex='1' onBlur='check_empty(document.form1.input_1);'></input>
<input id='input_2' title='second_input' tabindex='2' onBlur='check_empty(document.form1.input_2);'></input>

和我的JavaScript：

function check_empty(field){
    if(field.value === ""){ 
       alert('Please enter' + field.title); 
       field.focus();
    }
};

我一直面临的问题是，每当我将input1留为空白并按TAB时，焦点现在位于input2上，并且从JavaScript它将焦点从input2更改为它，然后由于input2失去了焦点，因此JavaScript更改了焦点从input1到它！等等。

我该怎么办？

Answer 1

1-您的onblur指向一个不存在的函数check_empty()。

2-您需要使用适当的参数调用该函数，以便它可以检查该字段。无需将id传递给函数。您只需传递this，它将指向调用该函数的元素。

3-弹出alert()会导致您每次单击“确定”按钮以消除警报时自动将焦点从文本框中删除，从而导致onblur函数被触发无穷大。更好的解决方案是将消息发布到页面上，从而在不影响用户体验的情况下通知用户。

function check_empty(field){
   var msg = document.getElementById('message');
   msg.innerHTML = '';
    
    if(field.value === ""){ 
       field.focus();
       msg.innerHTML = '<br>Please enter ' + field.title; 
       
    }
};

Click inside a field, then try to leave it empty. <br>
<input id='input_1' title='first_input' tabindex='1' onBlur="check_empty(this);">
<input id='input_2' title='second_input' tabindex='2' onBlur="check_empty(this);">
<div id='message'></div>

需要onBlur事件的帮助

1 个答案: