JS實現回車鍵切換到下一個輸入框
進入正題之前,首先說明一下這裡的情況。
因為我的input輸入框全部都是使用JS程式碼動態生成的,也就是說我在頁面裡面點選一次按鈕就會生成幾個輸入框。所以我使用了JQuery的$("#id").on("keydown","input",function()特性來實現捕捉總輸入框的個數與按一次回車指向下一個輸入框,直到最後一個輸入框。
在這裡是使用JQuery實現的,程式碼如下:
//para_table 是一個id選擇器,這裡繫結在這個選擇器上 $("#para_table").on("keydown","tr input",function(){ //響應回車鍵按下的處理 var e = event || window.event || arguments.callee.caller.arguments[0]; //捕捉是否按鍵為回車鍵,可百度JS鍵盤事件瞭解更多 if(e && e.keyCode==13) { //捕捉para_table下的tr裡面文字輸入框的個數 var inputs = $("#para_table tr ").find(":text"); console.log(inputs.length); var idx = inputs.index(this); // 獲取當前焦點輸入框所處的位置 if (idx == inputs.length - 1) { // 判斷是否是最後一個輸入框 //if (confirm("最後一個輸入框已經輸入,是否提交?")) // 使用者確認 // $("form[id='save']").save(); // 提交表單 } else { inputs[idx + 1].focus(); // 設定焦點 inputs[idx + 1].select(); // 選中文字 } } });
如果這篇原創文章幫到了您,請為我點個贊哦~(^▽^)~
相關推薦
JS實現回車鍵切換到下一個輸入框
進入正題之前,首先說明一下這裡的情況。 因為我的input輸入框全部都是使用JS程式碼動態生成的,也就是說我在頁面裡面點選一次按鈕就會生成幾個輸入框。所以我使用了JQuery的$("#id").on("keydown","input",function()特性來實現捕捉總輸
js input框輸入1位數字後自動跳到下一個input框聚焦
key pre select all txt don sel this document // input框輸入1位數字後自動跳到下一個input聚焦 function goNextInput(el){ var txts = document.querySelec
jQuery回車鍵快速切換下一個input文字框解決方案
表單中有很多文字框,為了輸入方便使用回車鍵切換到下一個文字框。下面是實現步驟。 <!DOCTYPE html> <html lang="en"> <head>
js實現點擊下拉框選中對應的div
ted bsp tel 範圍 selected onchange 大學 left nbsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&
03 React快速入門(三)——實現從一個輸入框中新增完資料後此輸入框內容清除的功能
功能描述: 我們在一個輸入框輸入內容,然後點選新增按鈕,此輸入框的內容就會新增到頁面上,但是此輸入框中還存在上次輸入的內容,我們想在每次輸入新增完成之後,此輸入框中的內容就會清除,如圖:  
當input框輸入到限定長度時,自動focus下一個input框
需求背景 需要輸入一串15位的數字,但是要分為3個輸入框,每個輸入框限定長度5位,當刪除當前輸入框的內容時,focus到上一個輸入框: 實現方法 var field = $('.phone-field'); field.on('
EditText切換輸入法軟體的enter按鍵,實現跳到下一個EditText或搜尋等
首先,輸入法軟體的enter鍵其實是可以變的,可以變next,搜尋等等 例如:實現一個登陸介面 程式碼如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" a
javascript 一個文字框輸入完畢後自動跳轉到下一個文字框的方法
<!DOCTYPE html> <html> <head> <title>js24.html</title> <meta http-equiv="keywords" content="
JQuery intro.js 網頁引導外掛 關於在百度瀏覽器上無法使用鍵盤切換下一個步驟的問題解決
網頁中基本都有很多的網頁引導動畫,找了一些jquery的外掛,最終選擇了intro.js,官網在這裡:intro.js官網發現這個外掛整合簡單,配置也很方便,但發現v9.0的版本中,百度瀏覽器
QML建立一個帶多個下拉輸入框的視窗(ComboBox)
在網上搜了很多資料,用QML怎麼實現下拉框的方法很少,並且都很複雜,我按照他們的方法實現的下拉框效果並不是很好,在問了公司的老司機後,他告訴我一個很好用的QML類:ComboBox,下面直接看程式碼和效果圖 import QtQuick 2.5 import QtQuick
JS實現移動端下拉刷新更多分頁請求功能方法2.0
keyframes 發生 usb 第一次 odr back eight urn 返回頂部 本次2.0升級版為js實現移動端加載更多下拉刷新更多分頁請求功能方法(數據一次請求,前端分頁,適用於數據流量較少,數據量壓力小的頁面)同時新增loading組件,turnToTop組件
原生JS實現tab切換--web前端開發
soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見,應用非常廣泛,比較實用,一般來說是一個網站必不可少的一個效果。例如:https://123.sogou.com/中的一個tab部分: 1、案例源代碼 <!DO
unity 按tab鍵切換下一個inputfild
body oge false selected bool and right down unit using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; publi
(swiper+dropload).js實現選項卡下拉加載分頁
result ssi blog 鎖定 fun host -a nts load 依賴庫:swiper.min.js+dropload.min.js //dropload var tabIndex = 0; var tab1LoadEnd = false; var t
JS實現如何的統計一個字符串中相同的字符個數
個數 ++ indexof log pan let index 字符串 string 1 var string="start,stop,speed,start,speed,start,relocicty,start,start,start,st
利用JS實現圖片切換
事件舉例: 1.要求實現效果:當滑鼠懸停在照片上時更換為另一張照片;當滑鼠離開時,還原為本來的圖片。 說明: 1.一般來說對於一個事件問題處理起來分為三個步驟: (1)獲取事件 (2)繫結事件 (3)書寫事件驅動程式 程式碼如下 <!doctype html> <htm
python+selenium十二:一個輸入框雙層input標籤 python+selenium十二:一個輸入框雙層input標籤
python+selenium十二:一個輸入框雙層input標籤 先點選第一個,再對第二個進行操作,否則操作失敗 driver.find_element_by_css_selector(".pwd").click()driver.find_element_b
python+selenium十二:一個輸入框雙層input標簽
點擊 key word select clas cli nbsp 操作 pos 先點擊第一個,再對第二個進行操作,否則操作失敗 driver.find_element_by_css_selector(".pwd").click()driver.find_eleme
js實現tab切換功能
一、初始化html結構 <div class="tab" id="tab"> <span class="active">工作日</span> <span>休息日</span> </div> <d
react-redux實現監聽多個輸入框值,新增資料。一整套程式碼
1.mutation.js中 export const createSupportRecord = `mutation createSupportRecord($support: CreateSupportRecordInput!) { createSupportRecord(input: