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 ...
随机推荐
- python高阶函数sorted
原文 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个dict呢?直接比较数学上的大小是没有意义的,因 ...
- ireport 导出excel 分页 和 文本转数字格式的解决方法
景:ireport 画excel 报表,导出时要求 数据分页,每页包含 标题和页脚 1.画excel 2.处理分页 首先建立一个变量totalNum 用于记录总共有多少条记录,注意设置属性为Integ ...
- SpringMvc Controller请求链接忽略大小写(包含拦截器)及@ResponseBody返回String中文乱码处理
SpringMvc Controller请求链接忽略大小写(包含拦截器)及@ResponseBody返回String中文乱码处理... @RequestMapping(value = "/t ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
- 原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
- java 实现二叉树结构基本运算详细代码
static final int MAXLEN = 20; //最大长度 class CBTType //定义二叉树节点类型 { String data; //元素数据 CBTType left; / ...
- 《ArcGIS Runtime SDK for Android开发笔记》——(13)、图层扩展方式加载Google地图
1.前言 http://mt2.google.cn/vt/lyrs=m@225000000&hl=zh-CN&gl=cn&x=420&y=193&z=9& ...
- Android端访问服务器核心代码
- HCNA多区域OSPF配置
1.拓扑图 2.各路由器配置角本 ospf 多区域配置 #R5配置 sys sysname AR5 interface s2// ip add 10.0.35.5 255.255.255.0 inte ...
- CRM中间件里的CSA队列有什么用
我们有时候会在中间件的事务码SMQ2即Inbound队列查看器里观察到以CSA开头的队列: 这些队列的作用是什么呢?在SAP community上已经有很多朋友提出了相同的问题,也有专家在下列两个连接 ...