首页 > 其他分享 >js实现输入内容的实时字数统计

js实现输入内容的实时字数统计

时间:2022-08-28 20:57:54浏览次数:54  
标签:字数统计 DOM bind propertychange 实时 js input

效果

image

输入内容的同时,字数会相应同步改变

实现方式

使用jQuery实现的,比较简单。

$('#').bind('input propertychange', function () {
    $('#').text();
});

使用bind给DOM对象同时绑定input和propertychange两个方法,然后再给对于的DOM对象更新文本即可。

标签:字数统计,DOM,bind,propertychange,实时,js,input
From: https://www.cnblogs.com/ouhouyi/p/16633606.html

相关文章

  • EvaluationSystem:后端业务接口(js同步操作数据库)
    1、用户业务接口(services/user.js)用户相关业务:注册账号登录账号查看用户信息修改个人资料2、数据业务接口(services/data.js)添加一条数据查询一条数据所有数据......
  • umijs如何使用封装好的Lottie动画
    lottie:设计师制作动画,并提供json文件。前端可以使用对应的api操作时间流,对动画进行一些事件上的操作。官网文档: https://github.com/airbnb/lottie-web一.下载依赖 n......
  • js实现防抖节流
    前端项目开发过程中,对一个dom元素动作绑定了事件,但触发dom函数的动作过于频繁从而影响页面性能甚至出现bug的情况,比如:页面滚动scroll事件、浏览器窗口resize事件、输入框......
  • js事件,jQuery类库的介绍
    目录JSJS获取用户输入JS类属性操作JS样式操作事件1.事件的含义2.触发方式3.添加事件的两种方式4.关键字this5.window.onloadJS事件案例jQueryjQuery类库1.介绍2.jQuery导......
  • Spring Boot集成Jsp
    1、创建webapp目录,并在ProjectStructure中设置为资源文件夹2、导入依赖<!--内嵌Tomcat对jsp的解析依赖--><dependency><groupId>org.apache.tomcat.embed</grou......
  • threejs 实现3d柱状图
    import{useEffect,useRef}from'react';import{BoxGeometry,Mesh,AmbientLight,MeshPhongMaterial,MeshLambertMaterial,PerspectiveCamera,Scene,WebGLRe......
  • JS基础学习(二)操作BOM和DOM
    浏览器对象JavaScript可以获取浏览器提供的很多对象,并进行操作。windowwindow对象不但充当全局作用域,而且表示浏览器窗口。window对象有innerWidth和innerHeight属......
  • 关于vue的css样式对js动态添加的dom节点不生效问题的解决方法
    一、问题描述开发的时候免不了有时候需要向某个节点appendchild,添加子节点,但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点......
  • Vue3+vite+js 配置别名@报错
    Vue3+vite+js配置别名@报错vue3项目中配置vite.config.js时使用path模块报错,一直警告找不大到path模块原因:path模块是node.js内置的功能,但是node.js本身并不支持ts解决......
  • JS基础学习(一)函数和对象
    函数定义方式1.第一种functionabs(x){if(x>=0){returnx;}else{return-x;}}2.第二种变量赋值的形式,注意最后有一个分号";......