一、为一个元素的所有子元素设置统一样式：.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. thymeleaf调用静态类

    为啥需要调用本地静态方法 Thymeleaf模板里面有时候需要使用本地静态常量,要是每次都在控制层传一遍很麻烦 我们需要在Thymeleaf模板我们使用比如 1代表一年级,2代表二年级,3代表三年级等 ...

  2. idea中web项目的创建

    在idea中创建web项目 1)创建一个普通的Java项目 2)右键项目选择ADD Framework Support  3)勾选JavaEE 4)添加jar包 点击Project Structure ...

  3. Java 新内存(cache)模型解析

    JMM 相关文档: Java Language Specification Chapter 17 The JSR-133 Cookbook for Compiler Writers - Doug Le ...

  4. ubantu系统之快捷键使用

    1. 文件管理器中,目录切换为可以编辑的状态: ctrl + l 2. gedit 搜索 : ctrl + h

  5. java中递归的用法和例子

    递归   直接或者间接调用自己, public class Test{    public static void main(String[] args){        int i = 5;    ...

  6. springMVC中获取request和response对象的几种方式（RequestContextHolder）

    springMVC中获取request和response对象的几种方式 1.最简单方式:参数 2.加入监听器,然后在代码里面获取 原文链接:https://blog.csdn.net/weixin_4 ...

  7. vue中对element-ui框架中el-table的列的每一项数据进行操作

    vue中使用element table,表格参数格式化formatter 后台返回对应的数字, 那肯定不能直接显示数字,这时候就要对 表格进行数据操作 如图: 代码: methods: { //状态改 ...

  8. js知识梳理5：关于函数的要点梳理(1)

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  9. Python入门-系统模块time

    1.time模块 时间戳:1970年,1月1日开始时间元祖:包含日期,时间,保存日期结构的元祖对象格式化时间日期:按照指定的标记进行格式化处理 时间戳 import time time_num = t ...

  10. 招商银行 KubeVela 离线部署实践

    招商银行云平台开发团队自 2021 年开始接触 KubeVela,并探索 KubeVela 在招商银行云平台的落地实践,借此提升云原生应用交付与管理能力.同时因为金融保险行业的特殊性,网络安全管控措施 ...