On keyup 不满足条件

Question

<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。重置有效但字符也在输入。

Answer 1

您可以使用 regex to remove everything that is not a digit. I also change to the 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"/>

没有评论：

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"/>

Answer 2

有多种方法可以做到这一点。

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
});

Answer 3

您应该使用 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"/>

On keyup 不满足条件

On keyup is not satisfying the condition

html

javascript

onkeyup