如何限制input输入框联动数值的最大数值？

Web 开发 > HTML(CSS)
收藏 回复
[问题点数：100分，结帖人qq_31673157]
更多帖子
私信 空间 博客
qq_31673157
等级
本版专家分：0
结帖率 100%
有4个输入框分别为：A1,Y1,Y2,Y3
根据A1输入的数值分别限制Y1,Y2,Y3的最大输入数值（不是字符长度）。
公式为：
Y1的最大输入数值 = A1乘以500减去Y2减去Y3   
Y2的最大输入数值 = A1乘以500减去Y1减去Y3
Y3的最大输入数值 = A1乘以500减去Y1减去Y2

例如：
A1=2
y2=3
y3=4
Y1输入框里最大只能输入的数值 :  2*500-3-4=993  
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
浪子回头8
等级
本版专家分：1448
提交后比较一下，给出相应提示
只看TA 引用 举报 #1得分 0
私信 空间 博客
jio可
等级
本版专家分：16829
勋章
Blank
签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
红花 2020年9月 Web 开发大版内专家分月排行榜第一
2019年9月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2020年8月 Web 开发大版内专家分月排行榜第二
2020年7月 Web 开发大版内专家分月排行榜第二
2020年6月 Web 开发大版内专家分月排行榜第二
2020年4月 Web 开发大版内专家分月排行榜第二
2020年3月 Web 开发大版内专家分月排行榜第二
2019年10月 Web 开发大版内专家分月排行榜第二
Y1,Y2,Y3随便一个值变化都会影响最大值的范围，只能是在所有值都输入以后再做判断提示那些值不符合了
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：164903
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二 


<form method="post" id="form1" >

	A1 <input type="text" name="a1" value="" /><br>

	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>

	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>

	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>

</form>

<script type="text/javascript">

function fg(t) {

	var f = document.getElementById("form1");

	var a1 = f.a1.value*1||0;

	var y1 = t==f.y1?0:f.y1.value*1||0;

	var y2 = t==f.y2?0:f.y2.value*1||0;

	var y3 = t==f.y3?0:f.y3.value*1||0;

	if (t.value>a1*500-y1-y2-y3) {

		alert("输入的数大于最大值");

		t.value=a1*500-y1-y2-y3;

	}

}
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：164903
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二
改一下，这样比较好


<form method="post" id="form1" >

	A1 <input type="text" name="a1" value="" /><br>

	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>

	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>

	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>

</form>

<script type="text/javascript">

function fg(t) {

	var f = document.getElementById("form1");

	var a1 = f.a1.value*1||0;

	var y1 = f.y1.value*1||0;

	var y2 = f.y2.value*1||0;

	var y3 = f.y3.value*1||0;

	var tv = t.value*1||0;

	if (y1+y2+y3>a1*500) {

		alert("输入的数大于最大值");

		t.value=a1*500-y1-y2-y3+tv;

	}

}

</script>
只看TA 引用 举报 #4得分 100
更多帖子
私信 空间 博客
qq_31673157
等级
本版专家分：0
引用 3 楼 jslang 的回复:


<form method="post" id="form1" >

	A1 <input type="text" name="a1" value="" /><br>

	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>

	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>

	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>

</form>

<script type="text/javascript">

function fg(t) {

	var f = document.getElementById("form1");

	var a1 = f.a1.value*1||0;

	var y1 = t==f.y1?0:f.y1.value*1||0;

	var y2 = t==f.y2?0:f.y2.value*1||0;

	var y3 = t==f.y3?0:f.y3.value*1||0;

	if (t.value>a1*500-y1-y2-y3) {

		alert("输入的数大于最大值");

		t.value=a1*500-y1-y2-y3;

	}

}



非常感谢。
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
qq_31673157
等级
本版专家分：0
引用 4 楼 jslang 的回复:
改一下，这样比较好


<form method="post" id="form1" >

	A1 <input type="text" name="a1" value="" /><br>

	Y1 <input type="text" name="y1" oninput="fg(this)" value="" /><br>

	Y2 <input type="text" name="y2" oninput="fg(this)" value="" /><br>

	Y3 <input type="text" name="y3" oninput="fg(this)" value="" /><br>

</form>

<script type="text/javascript">

function fg(t) {

	var f = document.getElementById("form1");

	var a1 = f.a1.value*1||0;

	var y1 = f.y1.value*1||0;

	var y2 = f.y2.value*1||0;

	var y3 = f.y3.value*1||0;

	var tv = t.value*1||0;

	if (y1+y2+y3>a1*500) {

		alert("输入的数大于最大值");

		t.value=a1*500-y1-y2-y3+tv;

	}

}

</script>


完美解决我的问题。
只看TA 引用 举报 #6得分 0
收起
收藏 回复
qq_31673157

等级：

关注 私信 TA的帖子
多个输入框联动校验：怎么让一个输入框改动，触发另一个校验？

在项目的表单输入中，可能会遇到这种情况，我们需要限制一个最大最小值的范围。如 文本可范围：最小值：【】- 最大值：【】 这两个分别绑定了两个字段，拥有自己的校验方式，当最小值大于最大值时，两个都会报错...

基于SSM的校园二手交易平台的设计与实现

PS： Java版本：1.7 数据库：MySQL 框架：Spring + Spring MVC + MyBatis 服务器：Tomcat 前端解析框架：Thymeleaf 开发工具：Idea 2017 版本管理工具：Maven 版本控制工具：GitHub ...一、设计概...

jquery根据值得变化动态改变另一个值得大小（实时监控input输入框值得变化）

$(function(){ $('#addCarnum').bind('input propertychange',function () { var singleCarWeight=$('#singleCarWeight').val(); // var singleCarWeight=100; var addCarnum=$('#addC...

获取input标签里面的数字然后相加的一种方法

如果你要获取到input标签里面的值然后相加时你的代码可能是这样写的 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>加减乘除<...

输入框校验插件 - jQuery validate

jquery validate插件内置了常用输入框格式的校验，同时支持添加自定义校验； 演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...

针对elementUI input框验证非空或者必填项问题（输入之后还在报错）

首先表单验证是用到 rules属性 （需要在data中定义或者单个的话直接写在后面就行） 我这里是在data中定义了一个formRule数组 ，因为我需要验证多个input 这是定义的formRule数组，一定要注意formRule中的属性...

怎样用js实现两个输入框中的数字相加显示在第三个输入框

https://blog.csdn.net/Tsingsn/article/details/70186428?utm_source=blogxgwz6

android EditText输入框限制输入数字大小，一个页面内多次调整范围

在一个项目中需要限制一个输入框输入的数字大小，而且要和上一个选项联动，上一个选项选中了多少的范围，输入框就限制多大的范围 代码 先是布局 <EditText android:id="@+id/edt_param" ...

jquery在改变Select框中的值的同时设置另一个input框的值

$("#goodName").change(function(){ //alert($(this).children('option:selected').val()); 获取select框选中的option的value vargoodName=$('#goodName').children('option:selected').val(); ...

js 练习Day_03 点击计算三个数的最大值，省级联动

练习1 需求：点点击计算最大值时，将输入三个数中的最大值显示在最大值输入框。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script ...

form 表单监听输入框值变化 - js、ts

日常开发中经常会用到 form 控件做一些操作，其中会涉及到一些动态监听某些控件数值参数发生改变而产生的相关联动操作，可以通过 valueChanges 的方式获取某些控件并进行订阅监听的操作，例如下面例子中所示： ...

antd多个表单元素相互验证

这种验证是以第二个表单元素为主, 提示错误也只在第二个表单下...最大值: 需大于最小值和中间值 最小值: 需小于最大值和中间值 中间值: 需介于最小值最大值之间 代码: 1.render中表单元素 <FormItem label="最...

【EasyUI】Combobox的联动和onChange/onSelect事件绑定

【效果图】 (1)当选择“产品名称”这个查询项目时，运算条件只有“等于”和“不等于”，如下图所示。...(2)当用户选择可以进行数值计算的查询项目时，运算条件就会有很多，如下图所示。 【实现代...

avue 实现下拉框事件 自动填充其他框_Vue 模板语法、事件和表单使用

模板语法文本绑定，两个大括号，中间加上data里面的数据，message里面不仅可以是变量还可以是表达式 // 变量 {{ message }} // 表达式 {{ number + 1}} ​JS表达式(计算、拼接、只能是单个表达式)插入HTML代码(慎用...

MVC Easyui 行列合并，数据联动，界面增删不予数据库互动

Vs2010 MVC 分为两个功能 Vs2010 MVC 分为两个功能 1. 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下...

android安卓源码海量项目合集打包-1

下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar ...

Html相关知识点

web 基础的课程 html css javascript--js 后续 服务器端技术 jquery.ajax 静态页面(客户端技术) html:页面的内容用适当的元素显示 CSS:设置页面元素的外观/样式 Js:页面元素添加动态的显示效果 ...

DOM操作HTML（JS加强）

DOM简介和解析HTML  DOM 文档对象类型 Document Object Model 文档：标记型文档（HTML/XML） 对象：封装属性和行为（方法） 模型：共同特征的体现。 ...  文本  DOM想要操作的标记型文档先解析。（解析器）

使用vue实现两个数相加的计算

输入数字，点击计算可以实现两个数相加，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"&...-..

blur事件 和 按钮click事件联动 （等待器）

需求：离开输入框，自动通过一个接口计算数值，点击按钮上传给后台。 input得blur事件 和 click事件是没有直接关联得，先是执行blur事件，再执行click事件，没有异步一般同步得代码都能满足，这没有问题， 问题在于...

JAVAWEB开发之国际化与Ajax（重点）详解（以及jsonlib、xsream的使用）

国际化开发概述  软件的国际化：软件开发时，要使它能同时应对世界不同地区和国家的访问，并针对不同地区和国家的访问，提供相应的、符合来访者阅读习惯的页面或数据。 国际化又称为 i18n：internationalization（i...

javascript购物车

购物车 <style type="text/css"> body,html{ background-color: whitesmoke; } .shopBox{ width: 425px; height: 375px; background-color: white;... position: ...

h5 range实现slider滑块功能及样式自定义

本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动 我们先来看看效果图 h5 slider.gif 上图中，我们需要实现的难点就是那个绿色的滑块，其它都是输入框及文本框，容易实现。 滑块的实现 ...

JavaScript

JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape ...

JavaScript基础(一)

Js的历史1994年的时候,国外的网速7kb/10kb左右网景公司---liveScript (领航者浏览器)90年Java语言诞生jdk1.0 --将”java”--网景公司和sun公司-javaScriptjavaScript 微软公司-jsScript (将浏览器免费了…),垄断市场...

# AntD中数据校验方式分类整理

数据联动 单一数据校验 多数据联动校验 二 数据联动 有时候我们表单中的某一个控件的值可能会在别的控件中使用，或者，我们需要对输入值格式化。 举个例子，加入我们需要做一个新增档案的功能，某种事物的...

小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？...

JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。...2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape...

从零基础开始用Python处理Excel数据.pdf

首先学习Python的基础知识，然后使用Python来控制Excel，做数据处理。 Excel使用者、Python爱好者、数据处理人员、办公人员等 第1章 python基础 1.1 什么是python？ 1.2 为什么要学习用Python处理Excel表格？ 1.3 手把手教你安装python程序 1.3.1 下载python 1.3.2 安装python 1.3.3 验证是否安装成功 1.4 安装Python集成开发工具PyCharm 1.4.1 下载 1.4.2 安装 1.5 Python的输入与输出

jdk1.8 64位官方正式版 jdk-8u91-windows

jdk1.8 64位官方正式版 jdk-8u91-windows

C#入门必看实力程序100个

C#入门必看含有100个例字,每个例子都是针对C#的学习关键知识点设计的,是学习C#必须知道的一些程序例子,分享给大家，需要的可以下载

相关热词 c# 设置窗体为激活 c# 同步发送 c# 多进程 锁 c# 读取类的属性和值 c# out 使用限制 c#获取url的id c# update 集合 c# 公众号 菜单 c#for迭代 c#指针应用