IP輸入框 基於Jquery

2021-08-10 20:07:00 字數 1214 閱讀 5145

首先,在頁面上顯示ip輸入框

...一共有4個input, 用來分別存放ip位址的數值

為了美觀,可以為每個input 設定css,例如我設定如下(

每個人的樣式可能都不一樣,大家更具自己的具體需要設定css):

.ip-input

關鍵的地方是classname,例如上面的.ip-input,因為下面需要為它繫結基本的事件

繫結事件如下:

新建乙個 ip-num.js 然後在頁面引入,當然,引入ip-num.js檔案之前,你

需要引入jquery

,因為下面需要使用到jquery

ip-num.js:

/* 檢測ip型別的輸入框的基本操作, 適合dns subnet gateway*/

// 目標樣式, 這裡是上面的classname

var goal = ".ip-input";

// ip輸入框的最大值

var ip_max = 255;

// 監聽鍵盤輸入事件

$(goal).bind("keydown", function(event)

// 如果輸入了點 (.),則直接跳轉到下乙個輸入框

if(code == 110 || code == 190)

})// 監聽鍵盤離開事件

$(goal).bind("keyup", function(event)

// 如果輸入框的值大於100,並且符合規則,則跳轉到下乙個輸入框

if(value != null && value != '' && parseint(value) > 100 && parseint(value) <= ip_max)

// 判斷是否是0開頭的不規範數字

if(value != null && value != '' && parseint(value) != 0) else }})

// 失去焦點事件

$(goal).bind("blur", function()else

})大概就是這樣,附上我自己的截圖:

IP位址輸入框

ipt language jscr ipt for document event onkeydown if event.keycode 13 event.keycode 9 ipt ipt language jscr ipt var iplikeinputstr for var i 0 i 4 i ...

C winform中IP輸入框控制項

可以通過自定義控制項的方式做乙個ip輸入框,目前這個是乙個ip輸入控制項的類,還不能在工具箱中拖放,希望以後做乙個可以放在工具箱中的,這個類如下 public class ipinputbox label set public ipinputbox bool isnetmask public voi...

Jquery獲取輸入框的值

1 jquery獲取input輸入框中的值 如何用jquery獲取中輸入的值?test val input name test val input type text val input type text attr value 2 jquery獲取radio單選框選中的值 例項1 男女 獲取一組單...