2017-05-25 121 views
1

我有一個文本類型的輸入字段。用戶只能在該字段中輸入數字。如果他們試圖輸入一個非數字字符,它應該被忽略並且不顯示在字段中(並且未提交給服務器)。我認爲我可以通過HTML5模式屬性實現此目的:防止用戶在HTML5輸入文本字段中輸入非數字

<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone"> 

但它不能按預期工作。我仍然可以在該領域輸入任何角色。這裏沒有表單提交按鈕。只要他們退出現場,就會發出ajax呼叫。

我怎樣才能達到我想要的html5?

+0

防止輸入字符是不友好的,只是顯示一條警告消息,指出內容無效,在通過檢查之前不提交數據。例如。人們可能會複製並粘貼包含無效字符的數據,並打算將其編輯出來。最常見的是BSB號碼,幾乎總是寫成「000-999」,但輸入只需要像「000999」這樣的數字。爲什麼不讓我粘貼「012-345」,然後讓我刪除短跑? – RobG

+1

您是否在尋找'type =「number」' –

回答

4

所以,你可以通過在輸入字段It'll work in most browsers中添加type="number"完全做到這一點。

我建議使用排序正則表達式和一點JS來評估輸入,然後用允許的字符替換輸入。

var phone_input = document.getElementById('contact_phone'); 

function validDigits(n){ 
    return n.replace(/[^0-9]+/g, ''); 
} 

phone_input.addEventListener('keyup', function(){ 
    var field = phone_input.value; 
    phone_input.value = validDigits(field); 
}); 

Here's a quick codepen

我還放一點驗證的型號,以防萬一有人繞過JS。

+0

oops,剛剛得知您可以通過在輸入中添加'type =「number」'來實現。但是,我猜這是你的另一種選擇! –

+0

嘿@donato,介意接受我的回答? –

0

我認爲它不會與純html5工作,因爲該模式在提交表單後會影響(它會使驗證失敗)。但是因爲您已經在使用js,所以您可以使用例如jQuery.keypress()函數。

相關問題