如何在沒有Javascript的情況下強制輸入數字？

CodePen：http://codepen.io/leongaban/pen/hbHsk如何在沒有Javascript的情況下強制輸入數字？

我發現多這個問題的答案在堆棧here和here

但是他們都認爲相同的修訂，使用type="number"或type="tel"

這些都不是工作在我的codepen或項目:(

enter image description here

你看到我失蹤了嗎？

來源

2013-08-01 Leon Gaban

好像你需要一些客戶端腳本攔截非數字並拒絕他們。 – hoss

你使用什麼瀏覽器？ type =「number」應該起作用。到目前爲止，只強制所有瀏覽器中的數字，你將需要JavaScript驗證，如果你確定用戶只使用現代瀏覽器，你只能使用html5 – Hernandcb

我同時使用Chrome（主瀏覽器）和FireFox ...兩者都是靜止的允許我輸入字母 –

首先，您使用的瀏覽器是什麼？並非所有瀏覽器都支持HTML5輸入類型，因此如果您需要支持可能使用舊瀏覽器的用戶，那麼您不能依賴適用於所有用戶的HTML5輸入類型。

其次，HTML5輸入驗證類型無意做任何事情來阻止您輸入無效值;他們只是在輸入後對輸入進行驗證。您作爲開發人員應該通過使用CSS或JS來確定字段輸入是否無效，並在適當時將其標記給用戶。

如果您確實想要防止非數字字符進入現場，那麼答案是肯定的，您需要使用Javascript（最好的選擇是將其鎖定在keyUp事件中）。

您還應該注意確保您在客戶端上執行的任何驗證也會在服務器上進行復制，因爲任何客戶端驗證（無論是通過HTML5輸入字段還是通過您自己的自定義JavaScript）都可以繞過惡意用戶。

來源

2013-08-01 16:13:58 Spudley

謝謝，時間來尋找最好的JavaScript/jQuery方法來照顧這個現在... imho這應該被關注的標記級別。也許HTML6 :) –

在標記中做這件事的麻煩在於邊緣案例太多，可能的做法太多;他們永遠不會取悅所有人。例如，如果有人將字符串複製到字段中，你會做什麼？如果它包含數字但不是完全數字，那麼你如何處理？有些網站會希望它完全被阻止，其他網站會接受數字字符。其他人接受數字直到第一個非數字......等等。正如我所說，很多很多的邊緣情況。 – Spudley

它不會阻止你輸入，但它確實使輸入無效。您可以看到，如果添加以下樣式：

input:invalid { 
    border:1px solid red; 
}

來源

2013-08-01 16:08:12

啊，所以你確實需要Javascript修復這個？ –

阻止他們實際輸入字母？我相信是這樣。 –

首先，在你的Codepen，你的投入並沒有完全正確格式化的形式....嘗試添加<form></form>標籤是這樣的：

<form> 
<lable>input 1 </lable> 
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /> 

<br/> 

<lable>input 2 </lable> 
<input type="number" pattern='[0-9]{10}'/> 

<br/> 

<lable>input 3 </lable> 
<input type= "text" name="name" pattern="[0-9]" title="Title"/> 
</form>

來源

2013-08-01 16:17:32 Majo0od

這在Internet Explorer中不起作用。任何適用於IE，Chrome和Safari的解決方案？ –

如何在沒有Javascript的情況下強制輸入數字？

回答

相關問題