js 实时监听input中值变化

时间：2021-07-11 10:39:33

注意：用到了jquery需要引入jquery.min.js。

需求：

1.每个地方需要分别打分，总分为100;

2.第一个打分总分为40;

3.第二个打分总分为60。

注意：需要判断null、""、isNaN()(是否是数字:如输入的是字母"a")、输入数值大小范围不能超过规定的总分;

　　　如果为null、""、isNaN为true、输入数值大小范围超过规定的总分则将文本框赋值为空并将input对应的数值赋值为0参与计算总分。

文本框输入数值的时候总数会随着分数的输入而实时变化(即js实时监听input中值变化)。(实践是propertychange兼容各个浏览器，如IE、火狐、谷歌等)

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="js/jquery.min.js"></script>

<title>Insert title here</title>

<style type="text/css">  

</style>

<script type="text/javascript">

$(function(){

    $('input').bind('input propertychange', function() {

        var input1 = $("#input1").val();

        var input2 = $("#input2").val();

        var result = 0;

          if(input1==null||input1==""){

              input1 = parseInt(0);

          }else if(isNaN(input1)){

              alert("请填写数字！");

              $("#input1").val("");

              input1 = parseInt(0);

          }else{

              input1 = parseInt(input1);

              if(input1>40){

                  alert("填写的分数不能超过40");

                  $("#input1").val("");

                  input1 = parseInt(0);

              }

          }

          if(input2==null||input2==""){

              input2 = parseInt(0);

          }else if(isNaN(input2)){

              alert("请填写数字！");

              $("#input2").val("");

              input2 = parseInt(0);

          }else{

              input2 = parseInt(input2);

              if(input2>60){

                  alert("填写的分数不能超过60");

                  $("#input2").val("");

                  input2 = parseInt(0);

              }

          }

          result = input1+input2;

          $("#totalScore").val(result);

    });  

});

</script>

</head>

<body>

<!--  js 实时监听input中值变化  -->

分数1：<input id="input1" name="input1" value="">&nbsp;<span style="color: red;">(总分为40)</span><br>

分数2：<input id="input2" name="input2" value="">&nbsp;<span style="color: red;">(总分为60)</span><br><br>

总&nbsp;&nbsp;分：<input id="totalScore" name="totalScore" value=""><br>

</body>

</html>

相关文章