html - Javascript - onblur function cannot change the value of the textbox - Stack Overflow

admin管理员组

文章数量:1202372

I have some textboxes allowing users to enter numbers from 0 to 20. So that I have a js validation code to test if they follow the rule or not.

I have such the following textboxes:

<input type="textbox" name="tx1" onblur="checkValue(this.value)" />
<input type="textbox" name="tx2" onblur="checkValue(this.value)" />
....

Then I write a js function like this:

function checkValue(value) {
  if (value > 20) {
     return this.value = 20;
  } else if (value < 0){
     return this.value = 0;
  } else if (value == '' || isNan(value)) {
     return this.value = 0;
  } else {
     return this.value;
  }
}

I tried to test via console.log(). I tried alert('hi') and it works. However, it does not change value at all when meeting the above conditions. So could anyone help me to solve this?

I have some textboxes allowing users to enter numbers from 0 to 20. So that I have a js validation code to test if they follow the rule or not.

I have such the following textboxes:

<input type="textbox" name="tx1" onblur="checkValue(this.value)" />
<input type="textbox" name="tx2" onblur="checkValue(this.value)" />
....

Then I write a js function like this:

function checkValue(value) {
  if (value > 20) {
     return this.value = 20;
  } else if (value < 0){
     return this.value = 0;
  } else if (value == '' || isNan(value)) {
     return this.value = 0;
  } else {
     return this.value;
  }
}

I tried to test via console.log(). I tried alert('hi') and it works. However, it does not change value at all when meeting the above conditions. So could anyone help me to solve this?

• javascript
• html
• onblur

Share Improve this question Follow asked Sep 10, 2012 at 6:33 Tepken VannkornTepken Vannkorn 9,7131414 gold badges6262 silver badges8686 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

Try this

<input type="textbox" name="tx1" onblur="checkValue(this)" />

function checkValue(sender) {
var value = parseInt(sender.value);
  if (value > 20) {
     sender.value = 20;
  } else if (value < 0){
     sender.value = 0;
  } else if (value == '' || isNan(value)) {
     sender.value = 0;
  } else {
     return sender.value;
  }
}

Re-Write your code as below. Only passing this can do the job then.

HTML

<input type="textbox" name="tx1" onblur="checkValue(this)" />
<input type="textbox" name="tx2" onblur="checkValue(this)" />
....

Javascript

function checkValue(obj) {
  if (obj.value > 20) {
     obj.value = 20;
  } else if (obj.value < 0){
     obj.value = 0;
  } else if (value == '' || isNan(obj.value)) {
     obj.value = 0;
  } 
}

Your script is return the value but no place you to set those values. So when the blur function invokes script surely invoked.. but the value is not set any where.

"isNan()" is not a function but "isNaN()" is, send input elemment, not only element's value, for update the input value.

<script>
    function checkValue(input) {
    console.log(input.value);
  if (input.value > 20) {
     return input.value = 20;
  } else if (input.value < 0){
     return input.value = 0;
  } else if (input.value == '' || isNaN(input.value)) {
     return input.value = 0;
  } else {
     return input.value;
  }
}
</script>

<input type="textbox" name="tx1" onblur="checkValue(this)" />
<input type="textbox" name="tx2" onblur="checkValue(this)" />

本文标签： htmlJavascriptonblur function cannot change the value of the textboxStack Overflow