前端页面数据处理input、textarea输入框实时统计字数（真实字数）

需求：实时监听textarea/input的输入变化，并在页面上显示还能够输入多少字符。

初始做法（有问题，不准确）：

仅仅使用on keyup事件：导致在输入的时候会根据输入法状态把汉字拼音算进去，在换成汉字时并不改变统计结果

如下图：

改过的方法使用多个事件绑定（可行）：

//实时监听字数变化
$(document).ready(function(){$('.input').on('input focus keyup',function(){var strs   = getByteLen($(this).val());remain = strs.length;var content_msg = remain+'字';$(this).next().html(content_msg);         });
});//获取除标点符号之外的字数
function getByteLen(val) {strs = val.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，|\。|\？|\：|\；|\‘|\’|\”|\“|\、|\·|\！|\（|\）|\》|\《|\『|\』]/g,""); //let recxType = /^[0-9A-Za-z\u4e00-\u9fa5]{15,}$/;return strs;
}

前端页面数据处理input、textarea输入框实时统计字数（真实字数）相关推荐

textarea输入框实时统计字数（可统计中文，英文字数）
textarea输入框实时统计字数(可统计中文,英文字数) 效果图如下所示: html部分: <textarea name="des" id="" ro ...
html 实时统计字数,记一次前端 input、textarea输入框实时统计字数（真实字数）...
需求:实时监听textarea/input的输入变化,并在页面上显示还能够输入多少字符. 初始做法(有问题,不准确): 仅仅使用on keyup事件 :导致在输入的时候会根据输入法状态把汉字拼音算进 ...
input/textarea 输入框点击有边框解决方法
input/textarea 输入框点击出现类似以下的默认边框第一种方法(直接添加样式) input{outline: none;} 第二种方法(控制聚焦时不出现边框) input:focus{ou ...
jquery实现输入框实时统计字数和设置字数限制功能
<html><header><meta charset="utf-8"><title>测试实时字数显示</title>& ...
前端页面业务中的埋点统计数据
1.背景在H5的页面中有很多业务需要统计按钮的点击数与页面的打开数量统计以及客户是谁(多数是获取用户手机号),而统计数量的逻辑一般来说是在接口里进行以保证后台系统的查询,所以前端主要的方法便是用户点 ...
前端页面，input框禁用编辑的三种方法
1.disabled 被禁用的 input 元素,*不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.*设置后文字的颜色会变成灰色. <input type="text ...
html onblur ios,移动web端键盘问题、IOS安卓机input/textarea兼容性
前言:移动web开发中,安卓和IOS的input/textarea输入框在调用键盘是有差异的:安卓机键盘覆盖在页面底部:IOS机键盘将整个页面向顶部推.两种实现在真机上都会导致页面出现某些小问题,本篇 ...
SpringMVC(SSM)框架搭建JavaWeb项目时，前端页面文件上传，后台Java下载功能实现及相关问题记录说明
看在前面:前端页面通过input控件实现文件上传,后台Java使用SpringMVC框架的实现网上有较多教程,但是真正配置一遍下来不报错的较少,所以本博客前面先介绍一遍完整的设置步骤,然后介绍遇到的一 ...
html 实时计算字数,JavaScript 实现textarea限制输入字数，输入框字数实时统计更新，输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

前端页面数据处理input、textarea输入框实时统计字数（真实字数）

前端页面数据处理input、textarea输入框实时统计字数（真实字数）相关推荐

最新文章

热门文章

前端页面 数据处理input、textarea输入框实时 统计字数（真实字数）

前端页面 数据处理input、textarea输入框实时 统计字数（真实字数）相关推荐

最新文章

热门文章

前端页面数据处理input、textarea输入框实时统计字数（真实字数）

前端页面数据处理input、textarea输入框实时统计字数（真实字数）相关推荐