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中製作一個簡約的例子嗎？ – 2013-04-07 02:22:23

兩件事情：

對於每個開括號，正是你需要一個右括號。輸入的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 2013-04-07 02:29:45

在輸入的'onkeyup'屬性中。 – 2013-04-07 02:31:52

啊哈它現在的作品！謝謝 – CodyBugstein 2013-04-07 23:35:22

修正你的代碼與此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不匹配並不重要。 – 2013-04-07 02:33:03

@ZachRattner恰恰扎克，謝謝。我試圖弄清楚j08691是什麼意思 – CodyBugstein 2013-04-07 23:36:11

確實沒有必要，儘管它不會傷害。 – j08691 2013-04-07 23:41:08

嘗試給這個一杆：

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

試試這個，t替換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函數專注於（）對下一個表單元素不起作用

回答

相關問題