前端开发中经常会遇到 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取值区间实例的更多相关文章

  1. 特征不同取值/区间下 label 的均值曲线

    def two_plot(df, feat, tick_label=None, rotate_tick=60): print('\n### 不同取值/区间下 label 的均值曲线') fig, ax ...

  2. 翻页bug 在接口文档中应规范参数的取值区间 接口规范

    <?php$a=array("red","green","blue","yellow","brown&q ...

  3. 翻页bug 在接口文档中应规范参数的取值区间

    <?php$a=array("red","green","blue","yellow","brown&q ...

  4. Easyui input 取值跟赋值

    var val = $("#id").textbox('getValue')  //取值 $("#id").textbox('setValue','text') ...

  5. input取值

    ----------------------------1------------------------------ <span class="lv-a-right" id ...

  6. div赋值,取值和input赋值,取值

    一.div取值 <div id="txtXiaofei" class="txt-panel">你好</div> 获取div的值$(&qu ...

  7. 关于oracle分组排序取值的问题

    按照 某字段分组 某字段排序 然后取出该分组中排第1条数据(每组只取一条) SELECT* FROM( SELECT a.*,row_number() over(partition by ORI_FE ...

  8. C语言数据类型取值范围解析

    版权声明:本文为博主原创文章,未经博主允许不得转载.   为什么int类型的取值范围会是-2^31 ~ 2^31-1  ,为什么要减一呢? 计算机里规定,8位二进制为一个字节,拿byte来说,一个BY ...

  9. jQuery对html元素的取值与赋值实例详解

    jQuery对html元素的取值与赋值实例详解 转载  2015-12-18   作者:欢欢   我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...

随机推荐

  1. win10 uwp 获取按钮鼠标左键按下

    我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...

  2. win10 uwp 隐藏实时可视化

    新的vs有个功能,实时可视化 但是他会挡我们界面,想要隐藏 点击转到实时可视化,就是点击横线看到,接着就可以看到下面的选项 点击在应用程序中显示运行时,就是不选中 很简单就看到,没有那个 本作品采用知 ...

  3. OpenWRT 恢复出厂设置命令

    如果通过无线或者有线口无法连接到router,可以用恢复某些设置重新设置路由器. 1. 开机,等着一个工作灯亮的时候立即按下rest键2秒,然后就开始拼命闪烁,很好现在进入failsafe模式了. 2 ...

  4. ajax上传图片的本质

    1.图片上传到服务器. 2.后台将图片地址传到html页面,以图片形式展现. 3.后天将图片地址加入到input表单中,表单处于隐藏状态. 4.前端删除图片,通过js操作,移除图片与表单数据. 5.图 ...

  5. 【八】php三大流程控制总结

    1.顺序控制---不加控制的流程,默认按照顺序来执行你编写的代码 2.分支控制--有选择的来执行代码 单分支 语法:if(条件表达式){语句:} 快速入门 $age=150; if($age>1 ...

  6. 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 ...

  7. C# 8.0的三个令人兴奋的新特性

    C# 语言是在2000发布的,至今已正式发布了7个版本,每个版本都包含了许多令人兴奋的新特性和功能更新.同时,C# 每个版本的发布都与同时期的 Visual Studio 以及 .NET 运行时版本高 ...

  8. Python中subplots_adjust函数的说明

    使用subplots_adjust一般会传入6个参数,我们分别用A,B,C,D,E,F表示.然后我们对图框建立坐标系,将坐标轴原点定在左下角点,并将整个图框归一化,即横纵坐标都是0到1之间.从下图中可 ...

  9. Andrew 机器学习课程笔记

    Andrew 机器学习课程笔记 完成 Andrew 的课程结束至今已有一段时间,课程介绍深入浅出,很好的解释了模型的基本原理以及应用.在我看来这是个很好的入门视频,他老人家现在又出了一门 deep l ...

  10. visual filters 滤镜 ie

    滤镜ie9开始就废弃了,用来对ie4-8实现一些多媒体动画之类的效果.可以添加到标准的HTML控件上,例如text,图片   包含:1.界面滤镜  (Procedural Surfaces)2.静态滤 ...