我正在开展Angular 4项目。我有一个带有<input type="number">
min
和max
属性的HTML step
。我的目标是防止键入数字超出用户友好的最小 - 最大范围。我怎么能这样做?
function myFunction(e) {
var min = -100;
var max = 100;
var txtValue = document.getElementById("txt").value;
var pressedValue = e.key;
var combined = parseFloat(txtValue, pressedValue);
console.log(`OLD:${txtValue}\nNEW:${pressedValue}\nCOMBINED:${combined}`);
if (combined > max) {
e.preventDefault();
console.log('ohhw snapp');
}
}
&#13;
<input type="number" id="txt" value="Hello" onkeydown="myFunction(event)" min="-100" max="100" step="0.05">
&#13;
答案 0 :(得分:1)
出于用户体验的原因,我建议更像这样的东西。如果用户只是认为他们的键盘不工作,可能会让用户感到困惑。
$('.range-enforced').on('change', function(e){
var min=parseFloat($(this).attr('min'));
var max=parseFloat($(this).attr('max'));
var curr=parseFloat($(this).val());
if (curr > max) { $(this).val(max); var changed=true; }
if (curr < min) { $(this).val(min); var changed=true; }
if (changed) {
$warning = $(this).siblings('.warning')
$warning.text('Only ' + min + ' through ' + max + ' allowed');
$warning.show()
$warning.fadeOut(2500);
}
});
input + .warning {
background: #ffff99;
display: inline-block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="range-enforced" min="-100" max="100" />
<div class="warning" style="display: none;"></div>
答案 1 :(得分:0)
我看到的第一个问题是你向parseFloat提供了2个参数,它只接受1(可能你与parseInt混淆了,它带有2个参数 - 一个字符串和一个基数。你应该结合首先是数字,然后在组合值上进行1次解析浮动。
例如
function myFunction() {
var min = -100;
var max = 100;
var inputRef = document.getElementById("txt");
var txtValue = inputRef.value;
if(isNaN(parseFloat(txtValue))){
console.log("warning input is not a number");
return;
}
var newNum = parseFloat(txtValue);
console.log(`NEW:${newNum}`);
if (newNum > max || newNum < min) {
console.log('input not in range (' + min + ", " + max + ")");
inputRef.value = "";
}
}
&#13;
<input type="number" id="txt"
onkeyup="myFunction()"
min="-100"
max="100"
step="0.05"
>
&#13;
如果输入不在keyup范围内,输入将立即重置为空。根据上面的评论,您可以使用它来通知用户该问题。