select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色
1、select()事件默认选中文本框的全部内容
拿到input标签的节点,调用select()方法即可。但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下后,然后全选状态消失,后来经过测试是因为事件重复触发了,但还没有找到解决的办法,苦恼。。。。
ps:下午找到了解决的方法:
在vue组件中使用的select()方法换成setSelectionRange(0,1)即可、每次触发focus事件的时候都会默认全选全部文本。这个时候就会有人问了,如果只想选中部分文本怎么办,那么这个时候就体现出setSelectionRange(a, b)这个方法的好处了,假如你只想选中前 四个字符串,那么参数可以传(0, 4),或者b-a 等于你想要选中的字符串个数就可以了,举个例子(4, 8),这样也可以选中前四个字符串,不过我目前还没有找到可以利用事件来选中中间一段文本的方法。 对了,有一点setSelectionRange(a, b)这个方法这我们公司的项 目里只能起到默认全选的状态!!!
2、改变全选状态下的文字背景颜色和文字颜色
节点::selection { background:#ccc; color:#ff645d; }
节点::-moz-selection { background:#ccc; color:#ff645d; }
节点::-webkit-selection { background:#ccc; color:#ff645d; }
觉得好用的话记得给博主点赞呦!
select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色的更多相关文章
- input和textarea标签的select()方法----选中文本框中的所有文本
JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...
- JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- html5 textarea 文本框根据输入内容自适应高度
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- DEV中dx:ASPxPopupControl 控件的使用(在窗口关闭或隐藏时,清楚文本框中的内容)
//在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Cont ...
- vue中select的使用以及select设置默认选中
简介 今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句 ...
- javascript onblur事件阻塞选中input框
先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- Vue 中select option默认选中的处理方法
在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个 1.直接将默认值给 selectedOption <select v-model="selectedO ...
随机推荐
- sql使用自连接去重复查询
查询公司与公司最新刷新的一条信息 select t1.userid,t1.id,t1.title,t1.RegType,t1.Salary,t1.SubjectID,t1.RefreshTime,t2 ...
- net2.0实现net3.5特性,如扩展方法,Linq等
差不多两年没碰net了,今天想做个小工具,于是打开了久违的VS2012,由于客户终端还是winxp时代,而且是net2.0,且升级存在限制,因此必需在2.0下开发,之前的常用库是3.5写的,而且因为3 ...
- 关于JVM
Java 中通过多线程机制使得多个任务同时执行处理,所有的线程共享JVM内存区域main memory,而每个线程又单独的有自己的工作内存,当线程与内存区域进行交互时,数据从主存拷贝到工作内存,进而交 ...
- stark——分页、search、actions
一.分页 1.引入自定义分页组件 在/stark目录下创建utils工具包目录,复制page.py到该目录下,文件中有之前自定义的分页组件. class Pagination(object): def ...
- 【Android】6.0 添加Menu菜单组件、Intent启动活动、显式Intent、隐式Intent
1.0 在helloworld项目基础上创建活动SecondActivity: 2.0 其中main.xml: <?xml version="1.0" encoding=&q ...
- 针对 IE的 的优化
针对 IE 的优化 有些时候,你需要对 IE 浏览器的 bug 定义一些特别的规则,这里有太多的 CSS 技巧(hacks),我只使用其中的两种方法,不 管微软在即将发布的 IE7 beta 版里是否 ...
- Linux服务器性能评估与优化(二)
网络内容总结(感谢原创) 1.Linux内核参数优化 内核参数是用户和系统内核之间交互的一个接口,通过这个接口,用户可以在系统运行的同时动态更新内核配置,而这些内核参数是通过Linux Proc文件系 ...
- 【起航计划 031】2015 起航计划 Android APIDemo的魔鬼步伐 30 App->Preferences->Advanced preferences 自定义preference OnPreferenceChangeListener
前篇文章Android ApiDemo示例解析(31):App->Preferences->Launching preferences 中用到了Advanced preferences 中 ...
- Anaconda教程
python虚拟环境 当安装新的外部python包时,为了保证原版python的纯净,避免其他项目调试时出现错误,可使用Anaconda创建虚拟python进行调试和操作 创建新的虚拟环境(Win ...
- matlab练习程序(单源最短路径Dijkstra)
图的相关算法也算是自己的一个软肋了,当年没选修图论也是一大遗憾. 图像处理中,也有使用图论算法作为基础的相关算法,比如图割,这个算法就需要求最大流.最小割.所以熟悉一下图论算法对于图像处理还是很有帮助 ...