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()事件默认选中文本框的全部内容,并改变其背景色和文字颜色的更多相关文章

  1. input和textarea标签的select()方法----选中文本框中的所有文本

    JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...

  2. JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...

  3. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  4. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  5. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. DEV中dx:ASPxPopupControl 控件的使用(在窗口关闭或隐藏时,清楚文本框中的内容)

    //在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Cont ...

  7. vue中select的使用以及select设置默认选中

    简介 今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句 ...

  8. javascript onblur事件阻塞选中input框

    先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  9. Vue 中select option默认选中的处理方法

    在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个 1.直接将默认值给  selectedOption <select v-model="selectedO ...

随机推荐

  1. java字节码速查笔记

    java字节码速查笔记  发表于 2018-01-27 |  阅读次数: 0 |  字数统计: |  阅读时长 ≍ 执行原理 java文件到通过编译器编译成java字节码文件(也就是.class文件) ...

  2. 希尔排序——Java实现

    一.排序思想 希尔排序(Shell’s Sort)是插入排序的一种,是直接插入排序算法的一种更高版本的改进版本. 把记录按步长gap分组,对每组记录采用直接插入排序方法进行排序: 随着步长逐渐减小,所 ...

  3. js之变量介绍

    变量提升 JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部: 'use strict'; function foo() { var x = 'He ...

  4. H5前端的行业知识

    今天咱们不说代码!咱们说点行内的只是吧!! 一.前端基本技能: 会点设计,不要求精湛,处理图片,设计个小广告是要的: 精通HTML+CSS,并能快速处理各浏览器兼容问题: 熟练掌握Javascript ...

  5. 如何在web.config文件中配置Session变量的生命周期

    实例说明:在网上购物商城中,为了维护在线购物环境,一般只有注册会员才可以购买商品.实现购物功能时,先通过Session变量记录会员的登录名,然后在购买商品页面通过判断会员是否登录确定其能否购买商品. ...

  6. arcgis 10.2 安装教程(含下载地址)

    http://jingyan.baidu.com/article/fc07f98911b66912ffe5199b.html 2013年7月,Esri即将推出全新的版本——ArcGIS 10.2,那些 ...

  7. Struts的学习-例子

    一.新建空项目user和配置maven实现下面的页面 1.配置内容 2.编写struts.xml实现页面 <!--定义一个useraction--> <package name=&q ...

  8. diskpart分区

    分区知识充电: 主分区:主分区,也称为主磁盘分区,和拓展分区.逻辑分区一样,是一种分区类型.主分区中不能再划分其他类型的分区,因此每个主分区都相当于一个逻辑磁(在这一点上主分区和逻辑分区很相似,但主分 ...

  9. 时间序列算法理论及python实现(2-python实现)

    如果你在寻找时间序列是什么?如何实现时间序列?那么请看这篇博客,将以通俗易懂的语言,全面的阐述时间序列及其python实现. 时间序列算法理论详见我的另一篇博客:时间序列算法理论及python实现 - ...

  10. 配置环境变量时,cmd下运行java -version,报错:找不到或无法加载主类 -version

    这个方面适用于报错为:java 找不到或无法加载主类,一般是找不到类的路径,问题出在CLASSPATH环境变量上,当然这是大多数.大概率的出错点 不排除根据个人情况不况,所以想起来伟大领袖毛主席的话: ...