HTML最小和最大不工作的數字屬性

我有一個html表單，其中包括兩個數字字段，需要在一定範圍內的數字。我試圖用最小和最大屬性來完成這個如此HTML最小和最大不工作的數字屬性

<input type="number" id="AutoApprovalDelayInSeconds" min="0" max="2592000" step="1" placeholder="Range: 0 to 2592000"/> 
<input type="number" id="AssignmentDurationInSeconds" min="30" max="31536000" step="1" placeholder="Range: 30 to 31536000" required/>

但是當我輸入與無效輸入的形式，它沒有顯示錯誤或警告提交。我知道數字屬性只是一個數字的字符串表示，而不是一個整數或其他數字數據類型，所以我必須以某種方式將此輸入轉換爲javascript，或者我不正確地執行其他操作？謝謝！

編輯。我最初試圖在Firefox中打開這個，我現在知道它不支持這個功能。

來源

2013-07-24 macklin

什麼瀏覽器和版本？ –

@MikeChristensen Firefox 22.0 – macklin

@macklin https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input查看支持部分。 FF是不行的。 – Ken

假設表單名稱是form這是一個準系統腳本。你應該考慮改變輸入類型爲文本，所以你不必擔心跨瀏覽器兼容

<form id="form"> 
<input type="text" id="AutoApprovalDelayInSeconds" step="1" placeholder="Range: 0 to 2592000"> 
<input type="text" id="AssignmentDurationInSeconds" step="1" placeholder="Range: 30 to 31536000" required> 
</form>

var delay, duration, form; 
    delay = document.getElementById('AutoApprovalDelayInSeconds'); 
    duration = document.getElementById('AssignmentDurationInSeconds'); 
    form = document.getElementById('form'); 


form.onsubmit = function (e) { 
    e.preventDefault(); 
    delay = parseFloat(delay.value); 
    duration = parseFloat(duration.value); 
    if(delay < 0 || delay > 2592000 || isNaN(delay)) { 
    delay.focus(); 
    alert('AutoApprovalDelayInSeconds is invalid'); 
    return; 
    } 
    if(duration < 30 || duration > 31536000 || isNaN(duration)) { 
    duration.focus(); 
    alert('AssignmentDurationInSeconds is invalid'); 
    return; 
    } 
    // all input appears to be valid so send it 
    form.submit(); 
};

來源

2013-07-24 23:52:28

您不必更改輸入類型;您仍然可以使用'type = number'，從而支持瀏覽器中的檢查，即使它們禁用了JavaScript，並且該元素被非支持的瀏覽器視爲具有'type = text'。重要的是，在不支持「type = number」的瀏覽器中進行一些檢查，則需要使用JavaScript。 –

@ JukkaK.Korpela **是**。雙重檢查在HTML和JavaScript是理想的。我這樣做是因爲如果它在支持它的瀏覽器上工作，他沒有做出區分。但是，如果JavaScript被禁用，他會回到原點之一嗎？發送無效的表單輸入 –

請注意，HTML5 input[type='number']is not supported by many browsers，真的只是Chrome和IE10（注意：不是Firefox）。

使用Chrome我被限制發佈表單，但在許多其他瀏覽器上，您不會。如果你真的需要通過號碼限制用戶輸入，並且想要做一些驗證，那麼我建議你看看JavaScript（或許是jQuery Validate）。

來源

2013-07-24 23:47:29

不用擔心，我們實際上可以在2023左右開始使用這些東西.. –

不，我們不會 - 當商業世界中的每個人都還在使用IE9時（在10年的時間裏，我的意思是，上帝我如果現在是這種情況，我會喜歡它） –

HTML最小和最大不工作的數字屬性

回答

相關問題