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; }
觉得好用的话记得给博主点赞呦!