Блог

Главная - Вопросы по программированию - Как переориентировать курсор на недопустимый элемент ввода

Как переориентировать курсор на недопустимый элемент ввода

#javascript #jquery #jsp

#javascript #jquery #jsp

Вопрос:

У меня есть страница, на которой создается набор текстовых полей в зависимости от количества отправляемых товаров:

 <c:forEach var="num" begin="1" end="${qtyToShip}" step="1" varStatus ="status">
  <tr>
    <td>
      <input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />
    </td>
    <td>
      <input class="form-med" type="text" name="shipItems[${num - 1 }].shipCompanyBarCode"  onkeyup="if (!(event.keyCode==16 || (event.keyCode==9 amp;amp; event.shiftKey))) {UPSStep2Validate(this);}"/>
    </td>
  </tr>
</c:forEach>

Вот что я хотел бы сделать. Когда пользователь вводит штрих-код, мне нужно выполнить вызов AJAX, чтобы подтвердить, что штрих-код действителен (доступен для использования, корректен для того, что отправляется, и еще не использовался в этом заказе — предотвращение повторного сканирования).

Использование DWR для AJAX и этой службы работает нормально.

Проблема в том, что если проверка завершится неудачно, я бы хотел, чтобы фокус вернулся обратно к рассматриваемому полю. Этого не происходит. Фокус всегда переходит к следующему полю ввода.

Я пытался работать с различными событиями: изменение, размытие, нажатие клавиши и т. Д. Я пытался встроить фокус в javascript, пробовал с помощью jQuery, javascript и т. Д., Но безуспешно.

Ищу предложения / решения о том, как вернуть фокус обратно в поле ввода, которое вызывает проблему.

Комментарии:

1. Вы пробовали вызывать метод «.focus ()» для элементов DOM, которые вы хотите сфокусировать? Это все, что вам нужно сделать.

Ответ №1:

Если вы используете onblur, даже вы сможете установить фокус. Проблема связана со временем и когда запускается событие onchange.

 <input class="form-med" type="text" name="shipItems[0].barCode" id="shipItems[0].barCode" onblur="if(true){this.focus();}" />

Чтобы убедиться, что курсор находится в конце в IE, вы можете добавить событие onfocus:

 <input class="form-med" type="text" name="shipItems[0].barCode" id="shipItems[0].barCode" onblur="if(true){this.focus();}" onfocus="this.value = this.value;" />

Комментарии:

1. Проблема заключается в том, что я выполняю вызов ajax. Таким образом, похоже, что фокус уже изменился к моменту завершения вызова ajax. Итак, вызов this.focus() не поможет, поскольку «this» уже перемещен в следующий объект dom.

2. @boyd4715 извините, если G2Step2Validate содержит асинхронный вызов Ajax, вам нужно будет установить фокус из обратного вызова этого вызова Ajax. Поскольку первым параметром G2Step2Validate является this , присвоите его переменной и вызовите yourVariable . фокус () из обратного вызова Ajax. Если вы предоставите тело метода G2Step2Validate, я мог бы помочь вам в дальнейшем, если потребуется.

Ответ №2:

Из-за природы AJAX исходный подход недействителен. Это

  <input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />

невозможно выполнить. Решение, которое я придумал, заключается в следующем

  <input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="G2Step2Validate(this,'${shippingCommand.boxType}');" />

А затем в функции javascript, которая выполняет вызов ajax, если там возникает ошибка, тогда она управляет настройкой фокуса.

Метки: