使用原生js自定义内置标签

  1. 效果图

  2. 代码

    <!DOCTYPE html>
    
<html lang="en">

<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
    
</head>

<body>
    
    <article contenteditable="" id="textbox">
    
        我是文字
    
    </article>

    <p is="word-count"></p>
    
</body>
    
<script>
    
    class WordCount extends HTMLParagraphElement {
    
        constructor() {
    
            super();

            var wc = document.getElementById("textbox");

            function countWords(node) {
    
                var text = node.innerText || node.textContent
    
                console.log(text, text.length)
    
                return text.length;
    
            }
    
            var count = '字数: ' + countWords(wc);

            // 创建影子节点
    
            var shadow = this.attachShadow({ mode: 'open' });

            // 创建要给span标签，展示文字个数
    
            var text = document.createElement('span');
    
            text.setAttribute('class', 'text');
    
            text.textContent = count;

            var style = document.createElement('style');
    
            style.textContent =
    
            `
    
                .text{
    
                    color: green;
    
                    font-size: 25px;
    
                }
    
            `

            // 将文字添加到影子节点中
    
            shadow.appendChild(style);
    
            shadow.appendChild(text);

            // Update count when element content changes
    
            setInterval(function () {
    
                var count = '字数: ' + countWords(wc);
    
                text.textContent = count;
    
            }, 200)

        }
    
    }

    // Define the new element
    
    customElements.define('word-count', WordCount, { extends: 'p' });

</script>

</html>

使用原生js自定义内置标签的更多相关文章

  1. 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签

    学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签.  jsp标签的分 ...

  2. JSP标签：jsp内置标签、jstl标签、自定义标签

     一.jsp标签的分类: 1)内置标签(动作标签): 不需要在jsp页面导入标签 2)jstl标签: 需要在jsp页面中导入标签 3)自定义标签 : 开发者自行定义,需要在jsp页面导入标签    1 ...

  3. ThinkPHP中的内置标签

    ThinkPHP中的内置标签 1.内置标签分类 闭合标签 <tag></tag> 开放标签 <tag /> 2.包含文件标签 主要功能:实现对文件的包含(类似于re ...

  4. thinkphp5内置标签

    thinkphp5内置标签 知道内置标签怎么用,查手册的时候好查 却功能的时候在里面找着来用 内置标签一览 内置标签 变量输出使用普通标签就足够了,但是要完成其他的控制.循环和判断功能,就需要借助模板 ...

  5. Hexo 添加自定义的内置标签

    灵感 想设计一个记录自已骑行的页面,显示时间.地点.路线图等信息.方便以后做一些留念.定位想实现下面类似的效果.参考:<特效>      实现方案也比较简单,反键查看源码.直接Copy,在 ...

  6. ThinkPHP 模版中的内置标签

    内置标签就是模版引擎提供的一组可以完成控制.循环和判断功能的类似HTML语法的标签.   一.判断比较:   1.if标签进行条件判断 //if语句的完整格式 <if condition=&qu ...

  7. js中内置有对象

    statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...

  8. django中模板变量与内置标签以及过滤器

    本文参考 官方文档 . 一  模板变量 格式: {{ variable_name }} variable_name   命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...

  9. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

随机推荐

  1. webpack相关文章

    0.https://doc.webpack-china.org/concepts/ (webpack中文文档) 1.https://segmentfault.com/a/119000000617877 ...

  2. js图片倒计时

    var discountOnline = !{discountOnline} if (discountOnline) { _fresh() setInterval(_fresh, 1000); } v ...

  3. 原生JS日历 + JS格式化时间格式

    公司项目中用到,以前没做过,废了好几个小时 终于做好了 先来效果图(暂时没写样式 凑合着看吧) 点击左右按钮都能改变月份 下方表格中的数据也会跟着变化 贴上代码 : html部分: <div s ...

  4. 使用Jenkins自动编译我的 java 项目 git maven jenkins

    之前的项目已经将jenkins部署好,现在添加maven项目 准备工作 安装插件 Git plugin Publish Over SSH 全局设置  key: 是 linux服务器的私钥 Global ...

  5. LeetCode OJ：Combination Sum (组合之和)

    Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...

  6. L129

    Iraq Sees Spike in Water-Borne IllnessesIraqi health officials say that a health crisis stemming fro ...

  7. 【python】numpy pandas 特性（随时更新）

    [value map] 用df.replace(dict)可以解决.但是如果dict太大,会非常非常慢. [array相加的维度规律][广播] (2,3) 能和 (3,) 相加,不能和(2,)相加 ( ...

  8. Linux SVN 切换用户

    1.   临时切换 在所有命令前强制加上--username 和 --password 例如:svn up --username zhangsan --password 123456 2.   永久切 ...

  9. As3 Practises : use TheMiner do as3 project swf performance profile , find memory leak!

    The second and most universal way is to launch it from the mm.cfg fileTheMiner.swf must be trusted1: ...

  10. 你必须知道的495个C语言问题，学习体会一

    C语言作为一门古老的语言,其灵活性和容易出错都让人 又爱又恨,书籍<你必须知道的495个C语言问题>,使用问答的形式,告诉读者 C语言使用的各个方面的知识,包括一些冷知识等.以下,我要摘录 ...