On keyup 不满足条件答案

【问题标题】：On keyup is not satisfying the conditionOn keyup 不满足条件
【发布时间】：2020-09-16 07:28:07
【问题描述】：

<label> Telugu</label>         
    <input type="text" onkeyup="return isNumber(event)" name="telugu"  id="telugu" maxlength="3"/> <br> <br>


JS 

<!DOCTYPE html>
<html>
<head>
<script>
function isNumber(event){
    var k= event.keyCode;
    console.log(k);
    if((k>47 && k<58))   /// THIS IS NOT WORKING
{
        console.log("entered");
        var s1 = document.getElementById("telugu").value;
        var s2= document.getElementById("hindi").value;
        var s3= document.getElementById("english").value;
        var s4= document.getElementById("maths").value;
        var s5= document.getElementById("science").value;
        if(s1<0 || s1>100){
            console.log("tel")
            document.getElementById("telugu").value = 0;      
        }

我只想在文本框中输入数字。条件不起作用。如果文本框中的值小于 0 或大于 100。然后我将值重置为 0。重置正在工作，但字符也在输入。

【问题讨论】：

如果你只想在文本框中输入数字，为什么不能只使用<input type=number ？
@SaiDatta 我想使用文本框，这样表单的设计就会很好。使用号码。向下和向上箭头显示在数字框中
@DivyaGodavarti 如果这是您可以禁用它的唯一问题。只需将appearance 设置为无
@DivyaGodavarti 如果条件 if((k>47 && k<58)) 应为 if(k>47 && k<58) ，则有错误
在您提供的代码中，您缺少两个结束括号。请在代码末尾添加}}。

标签： javascript html onkeyup

【解决方案1】：

您可以使用regex 删除所有不是数字的内容。我还更改为input 事件，该事件在输入更改时触发。

如果您想强制使用数字，您也可以将类型设置为type="number"。这样做的好处是它会自动在手机和平板电脑上显示数字键盘，尽管您也可以使用 inputmode="numeric" attribute 来显示它

// Get the textbox
const telugu = document.getElementById("telugu");

// Add event that fires whenever the input changes
telugu.addEventListener("input", () => {
    // Replace everything that is not a digit with nothing
  const stripped = telugu.value.replace(/[^\d]/g, "");
  
  // If the value is below 0 or above 100 set it to 0, else enter the stripped value
  stripped < 0 || stripped > 100
    ? telugu.value = 0
    : telugu.value = stripped;
});

<label for="telugu">Telugu</label>
<input type="text" name="telugu" id="telugu" maxlength="3"/>

没有 cmets：

const telugu = document.getElementById("telugu");

telugu.addEventListener("input", () => {
  const stripped = telugu.value.replace(/[^\d]/g, "");
  
  stripped < 0 || stripped > 100
    ? telugu.value = 0
    : telugu.value = stripped;
});

<label for="telugu">Telugu</label>
<input type="text" name="telugu" id="telugu" maxlength="3"/>

简化：

function validateValue(event) {
  var input = event.target;
  var stripped = input.value.replace(/[^0-9]/g, ""); /* Everthing that is not (^) in the range of 0 through 9 */
  
  if(stripped < 0 || stripped > 100) {
    input.value = 0;
  } else {
    input.value = stripped;
  }
}

<label for="telugu">Telugu</label>
<input type="text" oninput="validateValue(event)" name="telugu" id="telugu" maxlength="3"/>

【讨论】：

谢谢。它正在工作，但请您简化 javascript 中的代码，因为我是初学者请
@DivyaGodavarti 最后一个 sn-p 是一个简化版本，它看起来更像你的代码。虽然有点难以简化像 regex 这样的东西。

【解决方案2】：

你应该用 parseInt() 函数做 s1 变量解析整数。

function isNumber(event){
    var k = event.keyCode;
    console.log(k);
    if(k>47 && k<58){
        console.log("entered");
        var s1 = parseInt(document.getElementById("telugu").value);
        console.log('s1', s1);
        if(s1<0 || s1>100){
            console.log("tel")
            document.getElementById("telugu").value = 0;      
        }
  }else{
    document.getElementById("telugu").value = null;
  }
}

<label> Telugu</label>         
<input type="text" onkeyup="return isNumber(event)" name="telugu"  id="telugu" maxlength="3"/>

【讨论】：

【解决方案3】：

有不同的方法。

input：当输入值改变时触发。

change：当输入值改变并且元素失去焦点（不再被选中）时触发。

blur：当输入失去焦点时触发。

您使用哪个事件，取决于您想要检查输入的何时。如果您想在值更改后立即检查它，请使用input。否则使用blur 或change。

例子：

let input = document.querySelector('#telegu');
input.addEventListener('input', () => {
    // Your check
});
input.addEventListener('change', () => {
    // Your check
});
input.addEventListener('blur', () => {
    // Your check
});

【讨论】：