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. 融云会话界面导航上移-使用IQKeyboardManager

    关于IQKeyBoardManager挤出导航栏的解决方案 方法一: 写在前面 虽然修改后能解决导航栏被挤出去的问题,但是就目前来看是有副作用的,写这篇文章就是想大家来一起讨论,毕竟键盘处理还是比较头 ...

  2. Java笔记之Scanner先读取一个数字,在读取一行字符串方法分析

    问题:大家在学习Java读取数据的时候一般都是使用Scanner方法读取数据,但是其中有一个小问题大家可能不知道, 就是我们在使用scanner的时候如果你先读取一个数字,在读取一行带有空格的字符串, ...

  3. 简单shell实现

    http://blog.csdn.net/lishuhuakai/article/details/11928055 #include <stdio.h> #include <unis ...

  4. Java集合篇四:Map的基本应用

    package com.test.collection; import java.util.HashMap; import java.util.Hashtable; import java.util. ...

  5. oracle学习篇六:子查询

    -- 1.查询比7654工资要高的员工 select * from emp where sal>(select sal from emp where empno=7654); ---2.查询最低 ...

  6. 【Android】3.0 Android开发环境的搭建(2)——eclipse

    1.0模拟机登录后,可能会一直停留在这个界面很久,那就去洗洗澡.睡睡觉.吃吃饭…… 2.0登录后可以在设置中改成中文,这样界面对国人来说比较友好. 3.0 虚拟机首页可以看到有短信息.拨打电话.浏览器 ...

  7. 软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操 ...

  8. JS构造函数(便于理解,简易)

    * 构造函数: * 1.构造函数的函数名最好首字母大写(否则 WebStorm 编辑器会提示报错) * 2.自己的对象多次被复制 * 3.构造函数里可以创建公有属性.公有方法.私有属性和私有方法 * ...

  9. C#操作CAD-调用winform

    个人认为用命令操作cad会比较便捷,但是鉴于好多人喜欢通过鼠标点击的方式操作cad,在此讲一下如何调用winform.前期准备请看上篇文章. 1.在新建好项目并引用接口dll的前提下,新建一个winf ...

  10. Anaconda中spyder 安装tensorflow

    关于Anaconda的安装就不介绍了,本文主要介绍spyder中安装 tensorflow.废话少说 直接重点: 1.安装好Anaconda之后,找到spyder图标 点击install,等待安装完成 ...