一、为一个元素的所有子元素设置统一样式：.className * { color: #6666 }

二、正则表达式：

1、去除所有HTML标签只保留文字： /<\/?.+?\/?>/
2、去除空格：/\s+/
　　\s：匹配任何空白符（空格、制表符、换页、换行…），等价于[ \f\n\r\t\v]
　　\s+：匹配上述任意多个字符

　　"." 表示除\n之外的任意字符
　　"*" 表示匹配0-无穷
　　"+" 表示匹配1-无穷

三、设置contenteditablefocus时，光标移动文本最后。

setFocu($(".className"));
function setFocu(ele) {
　　ele = ele[0];
　　ele.focus();
　　var range = document.createRange();
　　range.selectNodeContents(ele);
　　range.collapse(false);

　　var sel = window.getSelection();
　　sel.removeAllRanges();
　　sel.addRange(range);
}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>

    <title>Title</title>

    <script src="../commonJs/jquery-3.1.0.min.js"></script>

    <style>

        * {box-sizing: border-box;}

        .txtBox {

            width: 100%;

            height: 300px;

            outline: none;

            padding: 10px;

            border: 1px solid #FCA700;

        }

        .txtBox:empty::after {

            display: block;

            content: attr(placeholder);

            color: #999;

        }

        .lengthTip {

            text-align: right;

        }

    </style>

</head>

<body>

    <div class="txtBox" contenteditable="true" placeholder="请输入内容"></div>

    <p class="lengthTip"><span class="txtLength">0</span> / 500</p>

    <script>

        $(function () {

            txtObj.init();

        });

        var txtObj = {

            getLength: function () {

                var txtBox = $(".txtBox");

                txtBox.keyup(function () {

                    var reg = /<\/?.+?\/?>|\s+/g;

                    var txtLen = txtBox.html().replace(reg, "").length;

                    $(".txtLength").html(txtLen);

                });

            },

            getTxt: function () {

                $(".txtBox").html(txtJson.txt);

                txtObj.setFocus($(".txtBox"));

            },

            // 设置contenteditable光标位置

            setFocus: function (ele) {

                ele = ele[0];

                var range = document.createRange();

                range.selectNodeContents(ele);

                range.collapse(false);

                var sel = window.getSelection();

                sel.removeAllRanges();

                sel.addRange(range);

            },

            init: function () {

                txtObj.getLength();

                txtObj.getTxt();

            }

        }

        var txtJson = {

            "txt": '<div class="txtContent"><span>内容只包括文本，不包括html标签，空格、换行……</span></div>'

        }

    </script>

</body>

</html>

文本框字符限制、focus光标定位的更多相关文章

  1. WPF 自定义文本框输入法 IME 跟随光标

    本文告诉大家在 WPF 写一个自定义的文本框,如何实现让输入法跟随光标 本文非小白向,本文适合想开发自定义的文本框,从底层开始开发的文本库的伙伴.在开始之前,期望了解了文本库开发的基础知识 本文实现的 ...

  2. js文本框字符数输入限制

    我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常.今天就给大家分享一个jquery插件来解决这一问题. (func ...

  3. div contenteditable 重新编辑时focus光标定位到前面问题解决

    <div class="editdiv" id="edit" contenteditable="true">这是添加文字< ...

  4. input _文本框回车或者失去光标触发事件

    IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件. 了解这一 ...

  5. JQuery实时监控文本框字符变化

    $(function(){ $('input[name="addr"]').on('input propertychange', function() { if ($('input ...

  6. input文本框点击第一次光标在最右边

    效果: 样式效果引入bootstrap4.0就OK了. HTML代码: <div class="input-group w-25"> <div class=&qu ...

  7. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  8. DOM（九）使用DOM设置文本框

    1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypr ...

  9. Silverlight中文本框添加回车事件后，换行无法清除的解决方法

    在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...

随机推荐

  1. java-注解相关

    注解 概念:说明程序的,给计算机看  注释:用文字描述程序 先了解一些怎么正常javadoc文档 1:给类或者方法添加doc注释 2:通过命令javadoc 执行 类.java文件 新建的类: /** ...

  2. Spring配置连接池和 Dao 层使用 jdbcTemplate

    1.Spring 配置 c3p0 连接池 (1)导入jar包(Maven项目) <dependency> <groupId>com.mchange</groupId> ...

  3. Python学习--Python的了解与安装

    Python简介: Python 是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python 由荷兰人Guido van Rossum 于 1989 年底发明,第一个公开发行版发行于 19 ...

  4. Centos7 离线安装 KVM，并安装 Csr1000v

    最近需要在客户环境搭建 csr1000v,客户环境不能联网,同时使用 kvm 管理.所以需要离线安装 kvm,在利用 kvm 安装 csr100v ,中间遇到不少坑,现记录如下. 所有安装步骤是在 r ...

  5. 【静态页面架构】CSS之链接和图像

    CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...

  6. ZXing Blazor 扫码组件 , ssr/wasm通用

    项目介绍 本项目是利用 ZXing 进行封装的 Blazor 组件库 直接调用手机或者桌面电脑摄像头进行扫码 项目截图              项目地址 https://github.com/den ...

  7. SpringMVC-拦截器快速入门

    1.创建拦截器类实现HandlerInterceptor //该拦截器类必须实现HandlerInterceptor接口,手动覆盖其中的方法 public class MyInterceptor1 i ...

  8. k8s pod 在迁移zookeeper时出现的问题

    一次迁移中出现的问题,因为要搬迁机房,集群中的节点服务器分布在两个机房,通过专线打通了,现在需要整体都迁移到其中一个机房,所以pod要进行迁移,机器资源也比较紧张,在迁移中zookeeper迁移出现问 ...

  9. pod和容器（容易混淆的地方）

    在Kubenetes中,所有的容器均在 pod 中运行,一个pod可以承载一个或者多个相关的docker容器(或rkt,以及用户自定义容器),同一个Pod中的容器可以部署在同一个物理机器(可以叫宿主机 ...

  10. JAVA 进程线程详解

    线程和进程 一.进程 进程是指运行中的程序,比如我们使用QQ,就启动该进程分配内存空间. 进程是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自升的产生,存在和消亡的过程 二.线程 ...