使用原生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. MYSQL变量和状态

    mysql设置变量是在my.cnf文件里,修改配置文件后需要重启mysql的服务,才能生效.但是在线上服务器是不允许随便重启的,我们可以用命令直接修改变量值,使其生效.然后再修改配置文件中的值,以防止 ...

  2. day5-python中的序列化与反序列化-json&pickle

    一.概述 玩过稍微大型一点的游戏的朋友都知道,很多游戏的存档功能使得我们可以方便地迅速进入上一次退出的状态(包括装备.等级.经验值等在内的一切运行时数据),那么在程序开发中也存在这样的需求:比较简单的 ...

  3. 背景色与WM_ERASEBKGND

    1.背景模式 SetBkMode(TRANSPARENT/OPACITY) 用来反应文字,图形与窗口背景交互混合模式.透明则表示文字背景与窗口背景之间透明,互不干扰. 2.背景颜色 SetBkColo ...

  4. 打包发布自己的nodejs包

    下午的时候写了一篇关于一个不成熟的模板引擎的博客,觉得还是不太够,然后就封装了起来,做成了一款开发包.最后为了尝试一下如何发布自己的包,就又完善了一下.做此文以记之. 初衷 说来也不是什么高大上的东西 ...

  5. linux, windows, mac, ios等平台GCC预编译宏判断

    写跨平台c/c++程序的时候,需要搞清各平台下面的预编译宏,区分各平台代码.而跨平台c/c++编程,GCC基本在各平台都可以使用.整理了一份各平台预编译宏的判断示例. 需要注意几点: * window ...

  6. linux还原svn

    仓库中版本的备份及还原形式主要有两种:方式一:直接备份仓库整个文件夹(全部版本),重装svn程序后直接还原过去.方式二:通过svn命令行备份和还原指定版本号的数据全备份:使用svnadmin hotc ...

  7. Django 碎片集合

    命令行创建Django项目 熟记建立django命令:django-admin startproject xx   (start   project) 目录介绍 manage.py 文件是用来管理文件 ...

  8. 简单实用的跨域表单POST提交

    我们这里使用了iframe嵌套form表单POST提交,很简单,却能满足get|post等任何复杂情况的要求:缺点是没有返回值. 针对需要的地方加上一个iframe嵌套并塞入隐藏form表单,然后获取 ...

  9. web应用程序安全攻防---sql注入和xss跨站脚本攻击

    kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 博文主要内容包括两种常见的web攻击 sql注入 XSS跨站脚本攻击 代 ...

  10. ERP与MES

    EAS-ERP企业资源计划系统 能将企业的客户管理.商品管理.采购管理.仓储管理.销售管理.生产管理.应收应付.财务管理.工资管理.费用管理和业绩考核管理以及业务预警和全方位的分析汇总融为一体,为企业 ...