Функция Javascript для фокусировки() на следующем элементе формы не работает

Aaargh. Я написал простую HTML-страницу с формой на ней, чтобы взять номер телефона. Я включил функцию Javascript, которая позволяет перейти к следующему окну формы, когда она заполнена. Все кажется совершенным.Функция Javascript для фокусировки() на следующем элементе формы не работает

Однако по какой-то причине он не работает. Я не понимаю, почему, так как я создал почти идентичный файл только с формой и функцией, и он работает! Так что что-то в этом конкретном файле блокирует его, но после 30 минут возиться я не могу понять, что.

<html> 
     <head> 
      <script type="text/javascript"> 
       function moveToNext(curr, next) { 
        if(curr.value.length == curr.getAttribute("maxlength")) 
         next.focus(); 
       } 
      </script> 
      <title> Enter Phone Number </title> 
      <style type="text/css"> 
       #content { 
        background:url(images/content-bg-rpt.gif) repeat; 
        margin: 0 auto; 
        height: 300px; 
        width: 500px; 
       } 
       #formArea { 

        margin-top: 50px; 
        width: 250px; 
        margin-left: auto; 
        margin-right: auto; 
       } 
       #submit { 
        position: relative; 
       } 
       .formInput { /* These are the input styles used in forms */ 
        background: #f7f7f7 url(../img/input.gif) repeat-x; 
        border: 1px solid #d0d0d0; 
        margin-bottom: 6px; 
        color: #5f6c70; 
        font-size: 16px; 
        font-weight: bold; 
        padding-top: 11px; 
        padding-bottom: 11px; 
        padding-left: 11px; 
       } 
      </style> 
     </head> 

     <body> 
      <div id="container"> 
       <div id="content"> 
        <div id="formArea"> 
         <form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET"> 
          <input onkeyup="moveToNext(this, document.enterPhone.d345.formInput))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input> 
          <input onkeyup="moveToNext(this, document.enterPhone.d345))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input> 
          <input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input> 
          <input id="submit" value="Enter" type="submit"></input> 
         </form> 
        </div> 
       </div> 
      </div> 
     </body> 

    </html>

источник

2013-04-07 CodyBugstein

Не могли бы вы сделать минималистский пример в jsfiddle? –

Две вещей:

Для каждой открывающей скобки, вам нужно ровно один закрывающая скобки. Атрибут onkeyup ваших входов имеет две закрывающие круглые скобки и одну открывающую.
Пропустите HTML-элемент напрямую, а не .formInput.

Это решает обе проблемы для меня:

<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input> 
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>

источник

2013-04-07 02:26:36

Где нет скобок? – CodyBugstein

в атрибутах 'onkeyup' ввода. –

aha теперь работает! Спасибо – CodyBugstein

Исправлен код с этой jsFiddle example

HTML

<div id="container"> 
    <div id="content"> 
     <div id="formArea"> 
      <form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET"> 
       <input onkeyup="moveToNext(this, document.getElementsByName('d345'))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input> 
       <input onkeyup="moveToNext(this, document.getElementsByName('d6789'))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input> 
       <input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input> 
       <input id="submit" value="Enter" type="submit"></input> 
      </form> 
     </div> 
    </div> 
</div>

JavaScript

function moveToNext(curr, next) { 
    if (curr.value.length == parseInt(curr.getAttribute("maxlength"), 10)) next[0].focus(); 
}

В вашем JS вы делали сравнение между целым числом и строкой (curr.value.length == curr.getAttribute("maxlength")). В вашем HTML вы не правильно выбирали элемент с помощью document.enterPhone.d345.formInput.

источник

2013-04-07 02:28:06 j08691

Несовпадение int/string не имеет большого значения, так как он использует '=='. –

@ ZachRattner точно Zach, спасибо. Я пытался выяснить, что означал j08691 – CodyBugstein

Правда это не нужно, хотя это не повредит. – j08691

Попробуйте дать этому выстрел:

function moveToNext(curr, next) { 
    if (curr.value.length >= curr.maxLength) { 
     document.getElementById(next).focus(); 
    } 
}

HTML

<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET"> 
    <input onkeyup="moveToNext(this, 'd345')" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"/> 
    <input onkeyup="moveToNext(this, 'd6789')" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"/> 
    <input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"/> 
    <input id="submit" value="Enter" type="submit"/> 
</form>

http://jsfiddle.net/JZxPR/

источник

2013-04-07 02:34:43 fletch

попробовать это, заменить т hree с кодом ниже:

<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input> 
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input> 
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"></input>

источник

2013-04-07 03:03:30 Vinalynn

Функция Javascript для фокусировки() на следующем элементе формы не работает

ответ

Смежные вопросы