![](/img/trans.png)
[英]html <input type=“text” /> number-only with min and max value
[英]How to limit the max and min value of number in html text field
我有一個文本字段,應允許用戶輸入數字,最大長度應為2,最大值應為31,最小值應為1我能夠前2個條件,但不知道最后2個條件
有人能幫幫我嗎?
<input type="text" name = "ccdate" class="form-control" maxlength="2" onkeypress="return isNumber(event)" >
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
NOte我不想使用HTML5輸入類型=“數字”
document.querySelector("*[name=ccdate]").addEventListener("input", function () {
var num = +this.value, max = 31, min = 1; //converts value to a Number
if(!this.value.length) return false; //allows empty field
this.value = isNaN(num) ? min : num > max ? max : num < min ? min : num;
});
試試這個(Purely Jquery方法):
HTML:
<input type="text" name = "ccdate" class="form-control" maxlength="2">
<div id="div1"></div>
JQUERY:
$('[name="ccdate"]').keyup(function(){
if(parseInt($(this).val()) > 31){
$('#div1').html('value cannot be greater then 31');
$(this).val('');
}
else if(parseInt($(this).val()) < 1)
{
$('#div1').html('value cannot be lower then 1');
$(this).val('');
}
else
{ $('#div1').html(''); }
});
編輯: - (根據提問者評論檢查用戶輸入的字符串或數字):
$('[name="ccdate"]').keyup(function(){
if(isNaN($(this).val()))
{
$('#div1').html('entered string');
$(this).val('');
}
else if(parseInt($(this).val()) > 31){
$('#div1').html('value cannot be greater then 31');
$(this).val('');
}
else if(parseInt($(this).val()) < 1)
{
$('#div1').html('value cannot be lower then 0');
$(this).val('');
}
else
{ $('#div1').html(''); }
});
編輯: - (純Javascript方法)(只需為您的文本框提供一個唯一的id
,說't1'
)
document.getElementById('t1').addEventListener('keyup', function(){
this.value = (parseInt(this.value) < 1 || parseInt(this.value) > 31 || isNaN(this.value)) ? "" : (this.value)
});
使用min和max屬性,如果您希望用戶輸入數字,請將輸入類型設為數字,而不是將其作為文本提供...
<input type="number" name ="name_u_want_to_give" min="1" max="31" maxlength="2" />
請根據您的要求更正以下代碼。
`<script type="text/javascript">
function minmax(value, min, max)
{
if(parseInt(value) < 0 || isNaN(value))
return 0;
else if(parseInt(value) > 100)
return 100;
else return value;
}
</script>
<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value =minmax(this.value, 0, 100)"/>`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.