input实时监听控制输入框的输入内容和长度,并进行提示和反馈
一、前言
在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上。
那么,在传统的js操控DOM的情况下如何实现呢?
下面我们以输入框(input)为例,对用户的操作进行监听,并实时的反馈给用户
二、正文
1)控制输入框的输入
//控制输入框的输入==只能输入四位,且必须是数字和字母
$(node).attr("onkeyup", "if(this.value.length>4){this.value=this.value.substr(0,4)};value=value.replace(/[^0-9A-Za-z]/g, '')"); $(node).attr("onpaste", "if(this.value.length>4){this.value=this.value.substr(0,4)};value=value.replace(/[^0-9A-Za-z]/g, '')"); $(node).attr("oncontextmenu", "if(this.value.length>4){this.value=this.value.substr(0,4)};value=value.replace(/[^0-9A-Za-z]/g, '')");
- onpaste="return false;" 禁止向控件粘贴内容
- oncopy="return false;" 禁止复制
- oncut="return false;" 禁止剪贴
- oncontextmenu="return false;" 禁止使用右键
上面代码的:onkeyup表示侦听键盘输入事件;
onpaste表示侦听浏览器粘贴事件;
oncontextmenu表示侦听鼠标右键事件;
2)通过监听输入对页面进行反馈
上面的代码虽然可以通过监听事件来控制输入框的输入,但他是通过添加属性的方式,无法通过监听情况进行数据反馈
//通过侦听输入框,实时显示输入字符
if(/msie/i.test(navigator.userAgent)){
document.querySelector("input").addEventListener("propertychange", function(){
var input_value = document.querySelector("input").value;
document.querySelector(".value").innerHTML = input_value /10;
})
}else{
document.querySelector("input").addEventListener("input", function(){
var input_value = document.querySelector("input").value;
document.querySelector(".value").innerHTML = input_value /10;
})
}
/msie/i.test(navigator.userAgent)可以进行浏览器内核判断,区分IE和非IE
IE使用propertychange,非IE使用input事件,
通过监听输入框的每一次输入,来实时的反馈显示给用户。
3)输入框的输入长度限制
不要通过监听事件来进行长度限制,直接使用input自带的maxlength进行
<input name="" type="text" maxlength="4" placeholder="">
三、结语
MVVM模式能够很好的实现数据绑定,以上的方法只是传统JS下无奈的选择,建议还是早早的拥抱框架吧
input实时监听控制输入框的输入内容和长度,并进行提示和反馈的更多相关文章
- input实时监听(input oninput propertychange onpropertychange)
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- input实时监听value change
oninput ie9+,otheronpropertychange ie6-8 js使用 var el = docuemnt.getElementById('id'); if('oninput' ...
- EditText 详细信息(监听事件时,输入改变、透明背景、提示改变文字颜色、密文输入)
1.对EditText输入监视.给EditText 捆绑 addTextChangedListener 监控事件 能够. 2.EditText输入内容.密文显示: android:password=& ...
- jquery input 实时监听输入
$('input').bind('input propertychange', function() { alert('hello world') });
- input实时监听
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue-搜索功能-实时监听搜索框的输入,N毫秒请求一次数据
<template> <div class="search-box"> <input class="box" :placehold ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
随机推荐
- Alpha阶段第1周Scrum立会报告+燃尽图 05
作业要求与https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246相同 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 周 ...
- 初始化一个static的Map变量
第一种方法:static块初始化 public class Demo{ private static final Map<String, String> myMap; static { m ...
- How to convert a QString to unicode object in python 2?
How to convert a QString to unicode object in python 2? I had this problem to solve, and I tried to ...
- ZetCode PyQt4 tutorial Drag and Drop
#!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial This is a simple ...
- LG2831 愤怒的小鸟
题意 分析 看n的范围只有18,考虑状压dp. 用\(f(s)\)表示过集合s中的点所需最小的抛物线数量. 然后枚举点对算抛物线,判断其他点是否在抛物线上来转移. 细节 判断能否构成抛物线只需要判断斜 ...
- Linux内核调试
1.控制台优先级配置cat /proc/sys/kernel/printk6 4 1 76是控制台的优先级,打印信息的优先级要比它高才能打印出.4是默认的优先级cat /var/log/message ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- 转:HL7 Tools suite
HL7 Tools suite HL7的官网有很多开源工具, 比如:RoseTree,V3Generator,RMIM Designer, Design Repository, V2 & ...
- emacs之配置yasnippet
~/emacsConfig/auto-complete-yasnippet-setting.el (require 'yasnippet) (setq ac-sources (append '(ac- ...
- (转)ASP与sql存储过程
本文转载自:http://www.cnblogs.com/Spring/archive/2006/10/18/532817.aspx ASP与存储过程(Stored Procedures)的文章不少, ...