一、为一个元素的所有子元素设置统一样式：.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. 面试问题之数据结构与算法：B树、B+树、B*树

    一.B树 B树是一种多叉平衡查找树,由于是多叉结构,对于元素数量非常多的情况下,树的深度不会像二叉结构那么大,可以保证查询效率. 二.B+树 B+是是B树的一种变形, 1.特点: (1).所有叶子结点 ...

  2. WSGI是个啥?大白话告诉你wsgi做了什么!

    定义: 官方定义:wsgi是Web服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI)是为Python语言定义的Web服务器和Web应用程序或框架之 ...

  3. SDS-redis动态字符串

    与C语言类似,redis自己创建了简单动态字符串SDS(Simple Dynamic String)即简单动态字符串,创建字符串类型的键值对,SDS表示字符串值,键值对的值为字符串对象 SDS用途可以 ...

  4. c++ 虚函数多态、纯虚函数、虚函数表指针、虚基类表指针详解

    静态多态.动态多态 静态多态:程序在编译阶段就可以确定调用哪个函数.这种情况叫做静态多态.比如重载,编译器根据传递给函数的参数和函数名决定具体要使用哪一个函数.动态多态:在运行期间才可以确定最终调用的 ...

  5. Linux系统下ifconfig命令使用及结果分析

    Linux下网卡命名规律:eth0,eth1.第一块以太网卡,第二块.lo为环回接口,它的IP地址固定为127.0.0.1,掩码8位.它代表你的机器本身. 1.ifconfig是查看网卡的信息. if ...

  6. 2018 百度web前端面试

    面试前 正式入职一年半左右,实习半年,勉强两年经验吧,然后很惊喜收到了百度的面试邀约,约得两点钟面试,然后本人一点钟就到了,通电话之后,面试官很热情,说正在吃饭吃完饭就去找我,让我去坐着等一会,然后一 ...

  7. 推荐一个用于压缩图片的JS插件：localResizeIMG

    惯例,先贴传送门:https://github.com/think2011/localResizeIMG 首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来 ...

  8. c++语法拾遗，一些细节与特性

    写了2年多的C+STL的acmer,在学习<C++ primer>时总结的一些少见的语法特性与细节.总体还是和题目说的一样这是一篇 c++ 拾遗. 1 变量和基本类型 1.1 基本类型 1 ...

  9. Jquery中each的3种遍历方式

    学习目标: 参考博文: https://blog.csdn.net/honey_th/article/details/7404273 一.Jquery中each的几种遍历方法 1. 选择器+遍历 &l ...

  10. Spring MVC框架搭建及其详解

    现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过 ...