注意：用到了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>

js 实时监听input中值变化的更多相关文章

  1. js实时监听input中值得变化

    <!DOCTYPE html> <html> <head> <title>zepto</title> <meta name=" ...

  2. js实时监听input中值的变化

    $(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...

  3. jQuery实时监听input的值变化（input的值产生变化才会触发事件）

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

  4. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  5. 使用jQuery实时监听input输入值的变化

    //jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...

  6. jq 实时监听input输入框的变化

    项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...

  7. 实时监听input输入的变化（兼容主流浏览器）【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  8. [转] 实时监听input输入的变化（兼容主流浏览器）

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  9. 实时监听input输入的变化（兼容主流浏览器）

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

随机推荐

  1. Android 样式 (style) 和主题(theme)

    转载:https://gold.xitu.io/post/58441c48c59e0d0056a30bc2 样式和主题 样式是指为 View 或窗口指定外观和格式的属性集合.样式可以指定高度.填充.字 ...

  2. Beta阶段测试报告

    前端测试计划 具体测试项如下: 注册测试 登录测试 忘记密码测试 一次登录后自动登录测试 退出登录测试 编辑资料测试 查看好友测试 搜索好友测试 添加好友测试 获取当前正在游戏的房间测试 创建房间测试 ...

  3. Android Studio如何减小APK体积

    最近在用AndroidStudio开发一个小计算器,代码加起来还不到200行.但是遇到一个问题,导出的APK文件大小竟然达到了1034K.这不科学,于是就自己动手精简APK.下面我们大家一起学习怎么缩 ...

  4. centos7下使用yum安装mysql

    CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 wget http://repo.mysql.com/m ...

  5. 今天开始学习java编程

    <java>程序设计教程与上机实验

  6. ios官方菜单项目重点剖析附项目源码

    原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift ...

  7. 一个简单的 Web 服务器 [未完成]

    最近学习C++,linux和网络编程,想做个小(mini)项目.  就去搜索引擎, 开源中国, Sourceforge上找http server的项目. 好吧,也去了知乎.    知乎上程序员氛围好, ...

  8. 记一次特别的bug

    问题现象 push入某个特定的画页,然后再pop出来,然后再切换不同的tabbaritem就会崩溃,而且没有任何提示,也没法定位崩溃位置,哪怕用了$arg1. 猜测,这种情况坏访问的可能性比较大,至少 ...

  9. 聊一聊PV和并发

    最近和几个朋友,聊到并发和服务器的压力问题.很多朋友,不知道该怎么去计算并发?部署多少台服务器才合适? 所以,今天就来聊一聊PV和并发,还有计算web服务器的数量 的等方法.这些都是自己的想法加上一些 ...

  10. 【先定一个小目标】Windows下Redis的安装使用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...