如何在onchange（）事件后调用的方法中将焦点设置为输入字段？

I've got problems with setting focus to an input field after validating it.

在验证后将焦点设置到输入字段时遇到问题。

I've got 2 fields: from and to.

我有两个领域:从和到。

   <spring:message code="template.fields.label.from"/>: 
       <mvc:input  path="templateFields.selectorRangeFrom" 
       onchange="validateNumber('templateFields.selectorRangeFrom',true)"/>
   <spring:message code="template.fields.label.to"/>: 
      <mvc:input path="templateFields.selectorRangeTo"   
     onchange="validateNumber('templateFields.selectorRangeTo',true)"/>

And I've got method validateNumber() which validates the field and returns false if the field is invalid, true otherwise. However the focus never stays on invalid number, it will always go the next object.

我有方法validateNumber()验证字段,如果字段无效则返回false,否则返回true。然而,焦点永远不会停留在无效数字上,它将永远是下一个对象。

function validateNumber(index,isInteger) {
 var object = document.getElementById(index);
 var value = object.value;   
 if (testNumeric2(value,isInteger)==false)   {
     alert('Please correct the value: ' + value);               
     object.focus();
     object.select();
     return false;  
 } 
return true;    
 }

I have found out that if I add: event.returnValue=false (before returning false), then it works for IE. But I can't find the solution for Firefox.

我发现如果我添加:event.returnValue = false(在返回false之前),那么它适用于IE。但我找不到Firefox的解决方案。

Thanks for any suggestions, matali

感谢您的任何建议,matali

2 个解决方案

#1

setTimeout() allows you to defer the execution of a function for a number of milliseconds - if you use zero, this simply means, "do this as soon as you're done with whatever you're doing now" - handling the event, in your case.

setTimeout()允许你将函数的执行推迟几毫秒 - 如果你使用零,这只是意味着,“一旦你完成了你正在做的任何事情,就这样做” - 处理事件,在你的情况下。

Try this:

if (! /** check field **/) {
   /** show error **/
   setTimeout((function() { object.focus() }), 0);
}

Basically you would be creating a function that will focus your input box, and then instructing the browser to call it as soon as it's done doing the default handling of the event.

基本上你会创建一个函数来聚焦输入框,然后指示浏览器在完成事件的默认处理后立即调用它。

#2

I'm not sure what returning false for onChange is supposed to mean. If you merely wish to re-focus the problem area, I would suggest you do this via a setTimeout() call (you will have to create a closure around your input element).

我不确定onChange返回false是什么意思。如果您只想重新聚焦问题区域,我建议您通过setTimeout()调用来执行此操作(您必须在输入元素周围创建一个闭包)。

This way the event handling will be complete when you attempt to focus the text box.

这样,当您尝试聚焦文本框时,事件处理将完成。

As a side note, I would also suggest you don't use alert() to notify the user of an error, since it is jarring, and can cause a harsh unexpected sound on many Windows systems. Displaying an icon next to, or a red border around the trouble control would probably be a much better way to treat the user.

作为旁注,我还建议您不要使用alert()来通知用户错误,因为它是刺耳的,并且可能在许多Windows系统上引起严重的意外声音。在故障控制旁边显示一个图标或红色边框可能是一种更好的方式来对待用户。

#1