input取值区间实例
前端开发中经常会遇到 input 取值区间的需求,比如搜索的时候,价格区间,积分值区间
大致的需求为 input 的值必须是正整数,第二个 input 的值必须大于第一个
dom结构如下:
<div id="box">
<label >所需积分:</label>
<div class="input_box">
<input id="input1" type="text" oninput="inputChange(this)" onchange="compare()" />
<span class='m05'>-</span>
<input id="input2" type="text" oninput="inputChange(this)" onchange="compare()" />
</div>
</div>
js代码如下:
function inputChange(ele){
ele.value = ele.value.replace(/\D+/,'').replace(/^0*/g,'');
};
function compare(){
// 获取输入框的值
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
// 输入框的值转为Number类型
var num1 = parseInt(input1.value);
var num2 = parseInt(input2.value);
// 如果第二个值小于第一个则互换
if(num2!=0 && num1>num2){
var temporaryValue = num1;
num1 = num2;
num2 = temporaryValue;
input1.value = num1;
input2.value = num2;
};
};
整个方法主要为两部分:
1. 利用 oninput 方法在输入的时候控制输入内容必须是数字,且第一个数字不能为0
2. 利用 onchange 方法在 input 输入完成后比较两个 input 的值,如果第一个大于第二个,则互换
如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。
input取值区间实例的更多相关文章
- 特征不同取值/区间下 label 的均值曲线
def two_plot(df, feat, tick_label=None, rotate_tick=60): print('\n### 不同取值/区间下 label 的均值曲线') fig, ax ...
- 翻页bug 在接口文档中应规范参数的取值区间 接口规范
<?php$a=array("red","green","blue","yellow","brown&q ...
- 翻页bug 在接口文档中应规范参数的取值区间
<?php$a=array("red","green","blue","yellow","brown&q ...
- Easyui input 取值跟赋值
var val = $("#id").textbox('getValue') //取值 $("#id").textbox('setValue','text') ...
- input取值
----------------------------1------------------------------ <span class="lv-a-right" id ...
- div赋值,取值和input赋值,取值
一.div取值 <div id="txtXiaofei" class="txt-panel">你好</div> 获取div的值$(&qu ...
- 关于oracle分组排序取值的问题
按照 某字段分组 某字段排序 然后取出该分组中排第1条数据(每组只取一条) SELECT* FROM( SELECT a.*,row_number() over(partition by ORI_FE ...
- C语言数据类型取值范围解析
版权声明:本文为博主原创文章,未经博主允许不得转载. 为什么int类型的取值范围会是-2^31 ~ 2^31-1 ,为什么要减一呢? 计算机里规定,8位二进制为一个字节,拿byte来说,一个BY ...
- jQuery对html元素的取值与赋值实例详解
jQuery对html元素的取值与赋值实例详解 转载 2015-12-18 作者:欢欢 我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...
随机推荐
- win10 uwp 获取按钮鼠标左键按下
我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...
- win10 uwp 隐藏实时可视化
新的vs有个功能,实时可视化 但是他会挡我们界面,想要隐藏 点击转到实时可视化,就是点击横线看到,接着就可以看到下面的选项 点击在应用程序中显示运行时,就是不选中 很简单就看到,没有那个 本作品采用知 ...
- OpenWRT 恢复出厂设置命令
如果通过无线或者有线口无法连接到router,可以用恢复某些设置重新设置路由器. 1. 开机,等着一个工作灯亮的时候立即按下rest键2秒,然后就开始拼命闪烁,很好现在进入failsafe模式了. 2 ...
- ajax上传图片的本质
1.图片上传到服务器. 2.后台将图片地址传到html页面,以图片形式展现. 3.后天将图片地址加入到input表单中,表单处于隐藏状态. 4.前端删除图片,通过js操作,移除图片与表单数据. 5.图 ...
- 【八】php三大流程控制总结
1.顺序控制---不加控制的流程,默认按照顺序来执行你编写的代码 2.分支控制--有选择的来执行代码 单分支 语法:if(条件表达式){语句:} 快速入门 $age=150; if($age>1 ...
- LeetCode 543. Diameter of Binary Tree (二叉树的直径)
Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...
- C# 8.0的三个令人兴奋的新特性
C# 语言是在2000发布的,至今已正式发布了7个版本,每个版本都包含了许多令人兴奋的新特性和功能更新.同时,C# 每个版本的发布都与同时期的 Visual Studio 以及 .NET 运行时版本高 ...
- Python中subplots_adjust函数的说明
使用subplots_adjust一般会传入6个参数,我们分别用A,B,C,D,E,F表示.然后我们对图框建立坐标系,将坐标轴原点定在左下角点,并将整个图框归一化,即横纵坐标都是0到1之间.从下图中可 ...
- Andrew 机器学习课程笔记
Andrew 机器学习课程笔记 完成 Andrew 的课程结束至今已有一段时间,课程介绍深入浅出,很好的解释了模型的基本原理以及应用.在我看来这是个很好的入门视频,他老人家现在又出了一门 deep l ...
- visual filters 滤镜 ie
滤镜ie9开始就废弃了,用来对ie4-8实现一些多媒体动画之类的效果.可以添加到标准的HTML控件上,例如text,图片 包含:1.界面滤镜 (Procedural Surfaces)2.静态滤 ...