-
js中input文本框设置和移除默认值
2020-07-17 15:50:37这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。 1.可以通过事件的方式,就是给input文本框加上onfocus属性,如下代码: <input id="keyword" name="keyword" size=...这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。
1.可以通过事件的方式,就是给input文本框加上onfocus属性,如下代码:
<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
οnfοcus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '
οnblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>
其实onfocus属性挺好用的,还可以在通过onfocus属性改变css样式,如下代码:<input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
οnfοcus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
οnblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>2.也可以使用jquery实现:
$(document).ready(function() {
var vdefault = $('#keyword').val();
$('#keyword').focus(function() {
//获得焦点时,如果值为默认值,则设置为空
if ($(this).val() == vdefault) {
$(this).val("");
}
});
$('#keyword').blur(function() {
//失去焦点时,如果值为空,则设置为默认值
if ($(this).val()== "") {
$(this).val(vdefault); ;
}
});
});————————————————
版权声明:本文为CSDN博主「浪里一淘」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/flywindmouse/article/details/16989203 -
让文本框会思考
2016-06-08 11:39:151. 失去焦点,触发事件(焦点从文本框移除检查); 2. 截取文本内容,装入数组; 3. 对文本内容的符号进行转化(支持中英文符号的输入); 4. 去除多余的输入(如空格); 5. 识别末尾字符,统一格式; 6. 替换文本...文本框的一些处理
不给用户犯错的机会,一起对用户体贴入微地关怀!
一、事项
1. 失去焦点,触发事件(焦点从文本框移除检查);
2. 截取文本内容,装入数组;
3. 对文本内容的符号进行转化(支持中英文符号的输入);
4. 去除多余的输入(如空格);
5. 识别末尾字符,统一格式;
6. 替换文本内容(去除不符合规范的内容)。
二、分列项
Html(Or Jsp)中:
a. 失去焦点,触发事件(焦点从文本框移除检查)
方案:在input标签中添加οnblur=" "事件属性
Js中处理:
b. 通过οnblur="changeContext(this);"传入指定控件(文本框)
方案很多:
1)通过var contextField =obj.value;读入文本内容;
2)通过jquery的$(”#ID”)、$(“.class”)读入;
3)通过js的document.getElementByNames(“name”)、document.getElementById(“ID”)读入;
c. 去除多余的输入(如空格)
方案:contextField = contextField.replace(/\s+/g, "");
d. 截取文本内容,装入数组
var transmit = [];
transmit =contextField.split(",");
e. 识别末尾字符,统一格式
var last= changeFiled.charAt(changeFiled.length - 1);
// 为了便于替换,对最后未加","的,统一补齐
if(last!= ","){
changeFiled= changeFiled+",";
}
f. 截去最后一个字符
方案:Fileds = Fileds.substring(0,userFileds.length - 1); // 从索引0开始,读取多少个字符
g. 替换文本内容(去除不符合规范的内容)
$("#ID ").val(“需要放入文本框中的内容”);
-
移除input在type="number"时的上下箭头和禁用鼠标滚轮事件
2017-08-08 15:53:46网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢? 1、chrome浏览器移除 input::-webkit-outer-spin-...网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢?
1、chrome浏览器移除
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance:textfield; }
使用none替代textfield,也可以实现去除箭头的效果
2、firefox浏览器下移除
input[type="number"]{ -moz-appearance:textfield; }
在firefox浏览器下使用none替代textfield没有效果。
3、用type="tel"代替
input[type="tel"]的value值亦是number,且其没有type="number"时的上下箭头,故我们可以用[type="tel"]代替[type="number"],达到一样的效果,并通过设置maxlength = "m"限定value值得长度。如果有其他的要求,可以通过正则来判断。当然这种方式不能解决本质问题
4、禁用鼠标滚轮事件
不同的浏览器有 不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),所以在这个过程中需要添加事件监听, 代码如下:兼容firefox采用addEventListener监听:
if(document.addEventListener){ //兼容firefox document.addEventListener('DOMMouseScroll',MouseWheel,false); }//W3C window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome if(document.addEventListener){ //兼容firefox document.addEventListener('DOMMouseScroll',MouseWheel,false); }//W3C window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
禁止默认行为
function MouseWheel(event) { event = event || window.event; event.preventDefault(); }
5、鼠标滚轮事件
判断滚轮的上下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、 Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;detail只取±3,wheelDelta只 取±120。
<input type="text" id="detail"/>
<input type="text" id="wheelDelta"/>
<script type="text/javascript"> var scrollFunc=function(e){ e = e || window.event; var t1 = document.getElementById("wheelDelta"); var t2 = document.getElementById("detail"); if (e.wheelDelta) {//IE/Opera/Chrome t1.value = e.wheelDelta; } else if (e.detail) {//Firefox t2.value = e.detail; } } /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome </script>
-
事件详解
2019-12-25 01:29:10移除事件 处理移除事件的兼容性问题 事件的三个阶段 事件冒泡的作用 事件对象 案例之跟着鼠标走的图片 获取页面滚动的距离 获取页面滚动距离的浏览器兼容性问题解决 获取鼠标在页面上的位置的浏览器兼容性...目录
事件详解及应用
注册事件的另两种方式
- btn.click = function() { }注册事件的结果是,只能给按钮btn一次处理事件的函数,当再 赋值一次处理函数时会把第一次的给覆盖掉,因为这时等号=赋值的一次。无法给同一个对象的同一个事件注册多个事件处理函数。
- btn.addEventListener(type, listenner,[,option]); 有三个参数,第三个参数为中括号可选的意思。参数一type为监听器类型的意思如click,参数二listenner为一个实现了接口的对象或一个函数function。如 btn.addEventListener('click', function() { })。该注册事件方法的特点在于可为同一按钮注册多个监听事件且不会有覆盖的情况 。有浏览器兼容性问题,IE9以后才支持
- btn.attachEvent('onclick', function() { });注册事件的第三种方式,不支持多个事件处理函数。只有两个参数非标准方法,IE里特有的方法,浏览器兼容性问题,IE6-10的老版本才支持.
-
处理注册事件的兼容性问题
function addEventListener(element, eventName, fn) { //判断当前浏览器是否支持addEventListener方法 if (element.addEventListener) { //若该元素有addEventListener方法则为ture element.addEventListener(eventName, fn); //第三个参数可选,默认false }else if (element.attachEvent){ element.attachEvent('on' + eventName, fn); } else { element['on' + eventName] = fn; //相当于element onclick = fu;参数除了可以用.还可以用中括号 } }
移除事件
顺序对应上面的注册事件
- btn.onclick = null; 将注册点击事件赋值为null即可
- 如果要移除事件,注册事件的时候不能使用匿名函数,因为匿名函数使用过后就清除了,而且removeEventListener中参数中要写具体的函数名。如btn.addEventListener('click', btnClick); function btnClick() { ... btn.removerEventListener('click', btnClick); ... }
- chrome 中不支持attachEvent,因为它是IE6-10老版本特有的注册事件方法。 移除方式为: btn.detachEvent('onclick', btnClick);
处理移除事件的兼容性问题
function removeEventListener(element, eventName, fn) { //判断当前浏览器是否支持removeEventListener方法 if (element.removeEventListener) { //若该元素有removeEventListener方法则为ture element.removeEventListener(eventName, fn); //第三个参数可选,默认false }else if (element.detachEvent){ element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = fn; //相当于element onclick = fu;参数除了可以用.还可以用中括号 } }
事件的三个阶段
- 第一阶段:捕获阶段(true,从最外层开始执行)。而onclick和attachEvent没有布尔值,所有只有捕获阶段。
- 第二阶段:执行当前点击的元素
- 第三阶段:冒泡阶段(false,从最里层开始执行)
- addEventListener的第三个参数的作用。如给三个div注册三个点击事件,其id放到一个数组里var array = [box1, box2, box3];
//addEventListener的第三个参数为false的时候为事件冒泡 for (var i = 0; i < array.length; i++) { array[i].addEventListener('click', function () { console.log(this.id); //要打印对应的id方法是用this,指当前对象 //输出结果为body box3,box2,box1为事件冒泡,即从最里开始 }) ; }
即当addEventListener的第三个参数为false的时候为事件冒泡,第三个参数为true时,是事件捕获(从最外层开始执行,输出为box1,box2,box3,body)
事件冒泡的作用
有了事件冒泡,那么我们就不用给所有对象都注册点击事件,如ul下有很多li,那么我们如果想要获得其中的li只需要给ul注册事件即可,如案例
var ul = document.getElementById('ul'); ul.onclick = function (e) { //e事件参数(事件对象):当事件发生的时候,可以获取一些和事件相关的数据 //获取到当前点击的li,让当前点击的li高亮显示 e.target.style.backgroundColor = 'red'; //e.target是当前真正触发事件的对象 }
事件对象
通过事件对象,可以获取到事件发生的时候和事件相关的一些数据,如事件的类型,事件的坐标
//通过事件对象,可以获取到实践发生的时候和事件相关的一些数据 var btn = document.getElementById('btn'); btn.onclick = function (e) { //DOM标准中,e是给事件处理函数的一个参数,e就是事件对象 //在老版本的IE中获取事件对象的方式,window.event //处理事件对象的浏览器的兼容性 e = e || window.even; //若存在事件对象e则返回e,不存在即为false,则||为布尔判断,则返回window.even //事件的阶段: 1.捕获阶段 2.目标阶段 3.冒泡阶段 (了解即可) console.log(e.eventPhase); //根据返回的数字来判断事件的阶段 console.log(e.type); //获取事件名称,如获取正在触发的是click,mouseOver或mouseOut等 //e.target 为获取真正触发事件的对象 console.log(e.target); //获取到鼠标点击的x、y坐标,该坐标是相对于浏览器可视区域的坐标 console.log(e.clientX); console.log(e.clientY); //获取鼠标在当前页面的位置,当有滚动条的时候,注意有兼容性问题,IE9以后才支持 console.log(e.pageX); console.log(e.pageY); }
案例之跟着鼠标走的图片
首先是相对于整个文档document来动,其次要获取鼠标的位置就要用到事件对象e(事件对象e有兼容性问题),然后是图片的脱离文档流即设置(position:absolute;)
var ts = document.getElementById('ts'); //获取图片的id document.onmousemove = function (e) { e = e || window.event; ts.style.left = e.pageX - 10 + 'px'; ts.style.right = e.pageY - 10 + 'px'; //减10是为了图片离鼠标更近一些 }
获取页面滚动的距离
在以前的版本中是没有pageX属性的,那么当时的处理方法是: pageX = clientY + 页面滚动出去的距离。
页面滚动出去的距离的获取方式为:
document.onclick = function () { //给文档注册点击事件 //输出页面滚动出去的距离 console.log(document.body.scrollLeft); console.log(document.body.scrollTop); //documentElement 文档的根元素 即html标签 //console.log(document.documentElement); //输出为整个html的代码 //有些浏览器是使用这两个属性来获取的 console.log(document.documentElement.scrollLeft); console.log(document.documentElement.scrollTop); }
获取页面滚动距离的浏览器兼容性问题解决
//获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { //返回的是一个对象 scrollLeft: scrollLeft; scrollTop: scrollTop; } }
获取鼠标在页面上的位置的浏览器兼容性解决
//获取鼠标在页面的位置,处理浏览器兼容性的问题 function getPage( e ) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { //返回的是一个对象 pageX: pageX; pageY: pageY; } } document.onclick = function (e) { e = e || window.event; //处理e的兼容性问题 console.log(getPage(e).pageX); console.log(getPage(e).pageY); }
获取鼠标在盒子上的坐标
常用于获取 了鼠标在盒子上的位置后用于放大作用
var box = document.getElementById('box'); box.onclick = function (e) { //获取盒子在页面上的位置 console.log(this.offsetLeft); //offsetLeft为盒子在页面上的纵坐标 console.log(this.offsetTop); e = e || window.even; //e对象的兼容性处理,有e对象则返回e,无则返回window.even //获取鼠标在盒子中的位置 = 鼠标的坐标 - 盒子的坐标 var x = getPage(e).pageX - this.offsetLeft; //e.pageX有兼容性问题,所有这里是调用了前面的兼容性处理的函数getPage(),此函数有返回属性pageX var y = getPage(e).pageY - this.offsetTop; }
取消默认行为的执行
- 如取消a标签链接的跳转行为
link.onclick = function (e) { alert('hello'); //取消默认行为的执行 return false; //即在注册点击事件时没有参数对象e,可用此方法来取消链接点击跳转页面的问题 //DOM中的标准方法 e.preventDafault(); //IE的老版本方法,是一个非标准的方法 e.returnValue = false; }
- 取消冒泡行为
//Propagation 传播,stopPropagation为停止事件传播,取消冒泡,标准的DOM方法 e.stopPropagation(); //取消冒泡的另一种方式:IE浏览器老版本的方法,是一个非标准的方法 e.cancelBubble = true;
案例之文本框只能输入数字
首先涉及到一个键盘事件,keydown:键盘按下的时候; keyup:键盘弹起的时候
keydown和keyup之间的区别:keydown的时候我们所按的键还没有落入文本框,keyup弹起时所按的键已经落入文本框
//所以我们需要在键盘按下的时候判断是否是数字 var txt = document.getElementById('txt'); txt.onkeydown = function (e) { //判断当前用户按下的键是否是数字 e = e || window.event; //事件对象e存在兼容性问题,此处为兼容性处理,判断当前的e是否存在 //e.keyCode 为键盘码即二进制,键盘上的所有字符都代表一个二进制 数字的键盘码为48-57 //console.log(e.keyCode); //指当前点击事件的键盘码,若不知道该字符的键盘码可输出打印看看 if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) { //后退键删除码为8 //如果输入的非数字则取消默认行为 e.preventDefault(); //这里不用return false;取消默认行为是因为若后面还有代码,则该return表示已结束退出并不会执行 } }
-
标识位:可以用以确定鼠标点击的是哪一个按钮或者是文本框
2018-05-21 15:33:00然后执行完之后移除;给拥有该class的元素添加事件即可; 1 //layer的父子页面之间,子页面传值给父页面; 2 $('#yes').on('click',function(){ 3 var $$ = parent.layui.jquery;//关键 4 var result=$('#c... -
事件驱动编程
2017-09-13 20:27:17事件源事件发生的来源,按钮、文本框等2.事件名称onclick、onchange、onfocus等通常事件以on开头3.事件处理函数发生事件以后 调用的函数叫做事件处理函数(也叫做事件监听器)4.事件对象即对事件的一个具体的描述, 键盘... -
工作总结(三)jQuery.remove( )移除与元素关联的附加数据和绑定事件
2018-02-07 17:28:12登记资产信息时,选择资产分类和资产名称的前提下,点击“型号”后的文本框,显示型号列表,选择“1”后,页面最下方正常。 然而再次点击型号,选择一个型号时,最下方会出现下面情况: 找到对应的js... -
jQuery中的事件与应用
2012-04-11 13:34:43目录: 一、事件机制 二、页面载入事件 2.1、ready()方法的工作原理 ...五、移除事件 六、其他事件 6.1、方法one() 6.2、方法trigger() 七、表单应用 7.1、文本框中的事件应用 7.2、下 -
JavaScript学习笔记(三),js中的事件,this的使用、表单验证、省市级联下拉框案例
2019-07-08 19:17:381、什么是事件?干什么用? 事件三要素: 事件源:触发(被)事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) ...onmouseout:鼠标移除元素上面时的事件。 文本框有的事件: onfocus:文本框获取到... -
-
事件监听的三种方法
2015-06-16 00:30:00事件监听的三种方法: addTarget --用于监听一些点击、值改变等事件 代理 -- 监听一些开始、结束、选中某行...文本框事件的监听: textfied代理只能监听开始编辑结束编辑,能否改变文字,不能监听改变文字后的情... -
四. jQuery对表单、表格的操作及更多应用(上:表单应用)
2010-07-19 16:39:00一、表单应用 1 获取和失去焦点改变样式(P142) $(function(){$(":input").focus(function(){ //获取焦点触发事件$(this).addClass...})2 多行文本框触发事件改变文本框高度(P144) $(function(){v -
VUE+ElementUI入门练习
2020-09-17 17:26:32VUE入手练习Todo 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录 ... 一、pandas是什么?... 字段判空、enter事件完成清空文本框; 3、删除任务 移除当前项 .. -
JS控制input仅能输入数字
2017-12-28 18:40:00最近碰到这样的问题,需要控制文本框中输入指定格式的数字,...一、利用鼠标移除事件,正则校验进行控制,方法如下: <input type="text" id="num" onblur=" var reg = /^(((\d|[1-9]\d)(\.\d{1,1})?)|100|1... -
按Enter键后Form表单自动提交的问题
2019-09-26 19:38:36怪事年年有,今年特别多。 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得。... 在把input元素上的所有事件移除掉后,我自信的按了一下en... -
【Vue表单】v-model的修饰符
2019-05-11 09:27:00在使用v-model绑定单行文本框时,还能用以下修饰符来实现某些需求 v-model的常用修饰符有以下几种 lazy number trim debounce(在Vue2.0后被移除) .lazy 在默认情况下,v-model 在input事件中同步输入框的值与... -
表单脚本
2017-12-03 23:59:07共有的表单字段事件 文本框脚本 选择文本 过滤输入 自动切换焦点 HTML5约束验证API 选择框脚本 选择选项 添加选项 移除选项 移动和重排选项 表单序列化 富文本编辑 使用contenteditable属性 操作富文本 富文本选区 ... -
-
伪装可编辑性
2010-07-20 16:00:00最近做一个投票的修改,在后台对投票进行修改的时候,不想提交所有的包括没有修改的信息, 用上一篇说到的readonly进行了伪装,但是在点击事件中绑定了移除该属性的事件。 结果效果就是和直接编辑没什么两样: 我... -
基础笔记2
2018-07-16 19:45:173、阻止事件冒泡 阻止默认行为 4、DOM 怎么增加 移除 移动 复制 创建 查找 节点 5、获取1-10之间的随机整数 6、得到页面中被选中的多选文本框 7、js实现得到100里所有可以被3整除的数的和 8、数字获取最大值,... -
【推荐】高清jquery视频教程下载
2019-06-17 11:44:5671:closest() 72:获取css 73:设置样式 74:设置透明度 75:offset 76:获取相对偏移 77:scrollTop 78:设置偏移 79:jquery事件 80:绑定事件 81:折叠和展开 82:隐藏和显示 83:事件合并 84:初始化样式 85:移除事件 ... -
JQuery权威指南源代码
2011-04-01 15:41:38移除事件unbind 其他事件one 其他事件trigger 文本框中的事件应用 列表框中事件应用 列表中的导航菜单应用 网页选项卡应用 删除记录时的提示效果 第5章 show()与hide()方法 动画效果的show()与hide()方法 ... -
《锋利的jQuery》高清扫描PDF带书签目录完整版+源码
2012-05-10 11:06:27在第1部分中,详细介绍了jQuery中的事件方法,比如事件绑定、合成事件、事件冒泡、事件对象的属性、移除事件、模拟事件等。在第2部分中,详细介绍了jQuery中的动画方法,比如普通动画,渐显动画,自定义动画等。在... -
可爱战机.fal
2015-06-15 10:14:50{ //移除事件侦听器 mc.removeEventListener(Event.ENTER_FRAME,enemyLeft); //如果容器中有对象 if(Enemys.contains(mc) ) {//将对象从容器中移除 Enemys.removeChild(mc); } } } ... -
-
jQuery权威指南366页完整版pdf和源码打包
2012-11-08 18:23:264.5 移除事件 4.6 其他事件 4.6.1 方法one() 4.6.2 方法trigger () 4.7 表单应用 4.7.1 文本框中的事件应用 4.7.2 下拉列表框中的事件应用 4.8 列表应用 4.9 网页选项卡的应用 ...