我開始爲我的網站編寫一些javascript來創建更好的用戶體驗，但是我對於究竟發生了什麼有些困惑，也許對別人顯而易見的是我我做錯了或失蹤。我有兩個JavaScript函數，在第一次使用後工作完美，並且如果您慢慢使用它（有時會跳過下一個項目，並且如果您按兩個鍵速度太快，則不會選擇任何內容）。我覺得我缺少某種$（document）.ready（function（）{}）;實施以確保每個過程在移動之前完成。我有兩個文本框，用戶放入兩個數字，然後移動到下一個選項卡元素（下一個文本框）。如果有任何影響，文本框也位於asp.net更新面板中。Javascript/jquery簡單的用戶體驗功能

function selectall(item) { 
      $(item).focus().select(); 
    }; 

    function selectNext(textBox) { 
     if ($(textBox).val().length == 2) { 
      $(textBox).next().focus().select(); 
     } 
    }; 

     <asp:TextBox ID="Text1" runat="server" Width="30px" AutoPostBack="True" onkeyup="selectNext(this);" onclick="selectall(this);" 
    Height="20px"></asp:TextBox>: 
       <asp:TextBox ID="Text2" runat="server" Width="30px" AutoPostBack="True" onkeyup="selectNext(this);" onclick="selectall(this);" 
    Height="20px"></asp:TextBox> 
       <asp:DropDownList ID="Text2" runat="server"

2012-04-11 Marrs

爲什麼你需要在UpdatePanel中包含文本框？

您的文本框中設置的AutoPostback可能導致您的jQuery出現問題，因爲每當TextBox控件失去焦點時都會發生頁面回發。

我會將您的文本框從您的UpdatePanel中移出，刪除AutoPostback並將您的JavaScript置於document.ready中。

編輯

代碼片段：

$(document).ready(function() { 
    $("#fname").keyup(function() { 
     selectNext($(this)); 
    }); 

    $("#fname").focus(function() { 
     $(this).select(); 
    }); 

    $("#lname").keyup(function() { 
     selectNext($(this)); 
    }); 

    $("#lname").click(function() { 
     $(this).select(); 
    }); 
}); 

function selectNext(textBox) { 
    if (textBox.val().length == 2) { 
     setTimeout(function() { 
      textBox.next().focus().select(); 
     }, 5); 
    } 
}

來源

2012-04-11 07:27:43 sbhomra

這些文本框在一個更新面板，因爲它是一個jQuery的對話框彈出爲需要回發到服務器，以填補一些一些用戶輸入的一部分c＃函數中的數據在爲用戶加載之前。所以這些文本框也以兩個數字開頭。感謝您指出我的自動後退，這確實解決了首次使用時首次使用的首次使用問題，但如果您仍將提起快捷鍵，它將跳過下一個文本框。 – Marrs 2012-04-11 07:43:19

我還應該提到我利用.blockui函數鎖定頁面，直到他們響應此對話框彈出div並單擊提交或取消。當我把$（document）.ready（function（）{}）;圍繞我的功能谷歌控制檯說，它不能找到這些腳本功能。 – Marrs 2012-04-11 07:55:21

我相信這個跳過問題與onkeyup事件有關，因爲它可能會在您完全釋放密鑰之前切換到下一個盒子？觸發下一個文本框關鍵事件？所以不知何故，這兩個文本框相同的關鍵事件？是我最好的猜測 – Marrs 2012-04-11 08:37:17

Javascript/jquery簡單的用戶體驗功能

回答

編輯

相關問題