類似智慧購票的demo--進入頁面後預設焦點在第一個輸入框，輸入內容、回車、right時焦點自動跳到下一個，當跳到select時，下拉選項自動彈出，並且可以按上下鍵選擇，選擇完成後再跳到下一個。
阿新 • • 發佈：2019-01-05
要實現的效果：進入頁面後預設焦點在第一個輸入框，輸入內容、回車、right時焦點自動跳到下一個，當跳到select時，下拉選項自動彈出，並且可以按上下鍵選擇，選擇完成後再跳到下一個。
PS：自己模擬的一個簡單效果，但仍然存在問題：網上搜了許多，關於select自動彈出的問題，仍然沒有解決，現在其實覺得select那裡實現的只是一個假象。當跳到第一個select時，option彈出，選擇後跳到第二個，但是再返回第一個後，第一個select的option就彈不出來了。。這裡該怎麼實現呢？？？
希望同學們看到後有什麼方法可以留言，可以完成一個完整的，謝謝。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/demo.css"/> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/demo.js"></script> <title>demo</title> </head> <body> <div class="wrapper"> <div class="container"> <form action="#" id="form" class="form"> <div class="form_inner"> <!--<label for="demo_1">使用者名稱：</label>--> <input type="text" class="demo_input" id="demo_1" name="demo_1" placeholder="請輸入..."/> <!--<label for="demo_2">1111：</label>--> <input type="text" class="demo_input" id="demo_2" name="demo_2" placeholder="請輸入..."/> <input type="text" class="demo_input" name="demo_3" placeholder="請輸入..."/> <textarea class="demo_textarea" name="demo_6" placeholder="請輸入..."></textarea> <textarea class="demo_textarea" id="demo_7" name="demo_7" placeholder="請輸入..."></textarea> <select class="demo_select" id="demo_4" name="demo_4"> <!--<select class="demo_select" id="demo_4" name="demo_4" onkeypress="return false;">--> <option>選項一</option> <option>選項二</option> <option>選項三</option> </select> <select class="demo_select" id="demo_5" name="demo_5"> <option>選項一</option> <option>選項二</option> <option>選項三</option> </select> </div> </form> <br/><br/><br/> <p>預設焦點在第一個；當input輸入內容大於10、right、回車，焦點跳到下一個；按left返回上一個；</p> </div> </div> </body> </html>
$(document).ready(function () { //keycode 37 = Left, keycode 38 = Up, keycode 39 = Right, keycode 40 = Down //預設焦點在第一個；當input輸入內容大於10、right、回車，焦點跳到下一個；按左鍵返回上一個； $('input').eq(0).focus(); $("[name^='demo_']").keydown(function (e){ var k = e.keyCode; if (k == 13 || k == 39 || $(this).val().length >= 10) { //回車 or right or >10 if($('#demo_4') || $('#demo_5')){ $(this).next().focus(); }else{ $(this).next().focus(); return false; } } else if (k == 37) { //left $(this).prev().focus(); $(this).prev().focus(function (){ var obj = e.srcElement ? e.srcElement : e.target; }); } }) });