使用原生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. 不能在Python Console中运行pytest

    在Python Console中运行pytest发现报错了 这是为什么?因为Python Console已经是进入python之后的环境,就像在python自带的IDLE中运行pytest pytes ...

  2. AI实现五子棋机器人（一）

    前言: 前几天在 csdn 下载资源的时候才发现自己 csdn 有近 200 的下载积分,看了看共享的资源,哈哈 ... 7年前写的五子棋游戏很受欢迎. 下载地址:新手入门五子棋游戏     刚入行的 ...

  3. MSSQL旋转和反旋转的例子

    1.旋转 ;WITH CTE AS ( AS VAL UNION ALL UNION ALL UNION ALL UNION ALL UNION ALL UNION ALL UNION ALL ) S ...

  4. axios 讲解 和vue搭建使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 记录下httpclient 发送请求 服务端用@RequestBody 自动接收参数 报415

    注解是post方式,那么检查以下内容:1. 你是否用了post请求2. 请求是否发送了数据3. 请求内容格式需要是 application/json .jquery 设置 contentType,-- ...

  6. Android中Application是什么？

    Application是什么? Application和Activity,Service一样,是android框架的一个系统组件,当android程序启动时系统会创建一个 application对象, ...

  7. Linux使用sshfs通过ssh挂载远端机器

    Linux使用sshfs通过ssh挂载远端机器 今天自己的开发机器突然磁盘剩余空间报警,再弄一块硬盘不太现实,于是想到了公司有一台机器上挂了一个大的磁盘,于是,我把目标偷偷锁定到了那个机器上. 折腾了 ...

  8. ip分包研究-以UDP为例

    原文 http://www.jianshu.com/p/741cb12ab0c9 测试环境: 利用iOS的NE从TUN抓取IP packets,如下代码分析ip包: uint16_t iphid = ...

  9. windows 下多线程

    unsigned uiThread2ID; HANDLE handle = (HANDLE)_beginthreadex(NULL, , ThreadUploadFun, NULL, CREATE_S ...

  10. 一个高性能RPC框架的连接管理

    既然说连接,先对EpollServer的连接管理做个介绍吧.客户端与服务器一次conn,被封装成为Connection类在服务器进行管理. 服务器连接有三种类型,分别为: enum EnumConne ...