在輸入時限制HTML輸入字段中的值？

在這個假設的頁面我有這方面的投入：在輸入時限制HTML輸入字段中的值？

<input type="number" min=1 max=9 required /> 
<input type="number" min=1 max=9 required /> 
<input type="number" min=1 max=9 required /> 
<input type="number" min=1 max=9 required />

的是交代不清的我是，我知道，如果我把輸入的表單並提交表單，他們正在限制。

但是如果你去撥弄：Fiddle

您可以輕鬆地輸入100或-20或任何超出1-9的範圍內的一側。

有沒有辦法在輸入他們的時間限制在輸入字段中的值？ /不提交它

（旁邊的問題：什麼時候輸入字段的最小/最大屬性生效？是否只在提交表單時？是否可以在不提交表單的情況下驗證值？）

來源

2015-11-07 jmancherje

我認爲當你提交表單的HTML 5的驗證來看，你可以使用jQuery驗證插件（http://jqueryvalidation.org/validate/）代替的HTML 5的驗證。 – Karan

在支持數字字段的瀏覽器，你應該得到的，當你模糊/離開現場錯誤。（你使用的是什麼瀏覽器？） – scunliffe

我使用谷歌瀏覽器 – jmancherje

你這個公司對我的工作

<input type="text" name="number" minlength='1' maxlength="9" required>

來源

2015-11-07 04:55:58 jay

我只是測試它和它doesn」採取任何動作不同 – jmancherje

有錯字'minlenght'應該'minlength' – Karan

@jay'minlenght'（既拼寫錯誤，爲數字字段不是一個有效的屬性）http://www.w3.org/T R/HTML的標記/ input.number。html'maxlength'確實只適用於測試字段來限制字符長度。 – scunliffe

試試這個：

$("input[type='number']").change(function() { 
 
    var $this = $(this); 
 
    var val = $this.val(); 
 
    var span = $(".error"); 
 
    if (val > 9 || val < 1) { 
 
    
 
    span.text("value must be between 1 and 9"); 
 
    }else{ 
 
    span.text(""); 
 
    } 
 
});

input { 
 
    width: 40px; 
 
    height: 40px; 
 
    font-size: 1.4em; 
 
} 
 
.error { 
 
    color: red; 
 
    font-style: italic; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<input type="number" min=1 max=9 required /> 
 
<input type="number" min=1 max=9 required /> 
 
<input type="number" min=1 max=9 required /> 
 
<input type="number" min=1 max=9 required /> 
 
<span class="error"></span>

來源

2015-11-07 05:12:14 Ramanlfc

它看起來像谷歌瀏覽器將強制在窗體上使用提交按鈕時的最小/最大值。

我已經更新了你的樣品，用3個提交按鈕（相應地標記）......一個將強制驗證，別人會顯示錯誤，但無論如何提交。

http://jsfiddle.net/uatxcvzp/12/

<form> 
    <input type="number" min="1" max="9" required /> 
    <input type="number" min="1" max="9" required /> 
    <input type="number" min="1" max="9" required /> 
    <input type="number" min="1" max="9" required /> 
    <br/> 
    <br/><input type="button" value="Submit With No Forced Validation" onclick="this.form.submit();"/> 
    <br/><input type="submit" value="Submit With No Forced Validation" onclick="this.form.submit();"/> 
    <br/><input type="submit" value="Submit With Forced Validation"/> 
</form>

在火狐，驗證發生在字段模糊，強調紅色場邊界並示出一個提示說明上懸停的誤差。使用任何提交樣式都會停止，並要求錯誤得到解決。

IE10，當您嘗試提交表單時，只有本地提交按鈕會強制驗證。

在在iOS9.1上的Safari，它看起來像是完全忽略了，無論使用提交按鈕/代碼風格。 :-(

來源

2015-11-07 05:13:41 scunliffe

你可以試試下面的代碼：

<input type="number" min=1 max=9 required onKeyDown="if(this.value.length==1) return false;" />

來源

2015-11-07 05:19:51 Mahmoud

在輸入時限制HTML輸入字段中的值？

回答

相關問題