一、为一个元素的所有子元素设置统一样式：.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. 什么叫线程安全？servlet 是线程安全吗?

    线程安全是编程中的术语,指某个函数.函数库在多线程环境中被调用时,能够 正确地处理多个线程之间的共享变量,使程序功能正确完成. Servlet 不是线程安全的,servlet 是单实例多线程的,当多个 ...

  2. Spring通知有哪些类型？

    (1)前置通知(Before advice):在某连接点(join point)之前执行的通知,但这个通知不能阻止连接点前的执行(除非它抛出一个异常). (2)返回后通知(After returnin ...

  3. JVM 选项 -XX:+UseCompressedOops 有什么作用？ 为什么要使用？

    当你将你的应用从 32 位的 JVM 迁移到 64 位的 JVM 时,由于对象的指针从 32 位增加到了 64 位,因此堆内存会突然增加,差不多要翻倍.这也会对 CPU 缓存(容量比内存小很多)的数据 ...

  4. 什么是 UML？

    UML 是统一建模语言(Unified Modeling Language)的缩写,它发表于 1997 年,综合了当时已经存在的面向对象的建模语言.方法和过程,是一个支持模型 化和软件系统开发的图形化 ...

  5. 网络协议之:socket协议详解之Socket和Stream Socket

    目录 简介 Socket是什么 Stream Socket 使用socat创建一个TCP服务器 使用ss检查TCP连接 使用nc连接socket 总结 简介 不管是在普通的网络编程中还是在netty中 ...

  6. 【AD】Altium Designer 原理图的绘制

    原理图设置基础 原理图的设置    设置原理图图纸大小 在原理图的绘制过程中,各个元件的大小是不能调整的. 如果原理图纸张放不下,需要对图纸进行设置:设计->文档选项,右键->选项-> ...

  7. 阿里云、腾讯云、CentOS下的MySQL的安装与配置详解

    一. 安装 查看是否已安装 # 查看MySQL版本 mysql --version # 查看MySQL相关文件 whereis mysql 若已安装,卸载方法如下 # 卸载MySQL yum remo ...

  8. Proxy相比于defineProperty的优势

    本文原链接:https://www.jianshu.com/p/860418f0785c https://blog.csdn.net/sinat_17775997/article/details/83 ...

  9. 浏览器视图层级中的“根”：<html>和<body>的属性研究

    做前端开发的同学都会知道,每一个UI系统(比如IOS或Android)中都会有一个view hierarchy(视图层级)的概念,即所有的可视元素(大到一个页面,小到一个button)都在一个树形结构 ...

  10. 前端每日实战：134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...