JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】


Posted in Javascript onSeptember 26, 2017

本文实例讲述了JavaScript实现的仿新浪微博原生态输入字数即时检查功能。分享给大家供大家参考,具体如下:

边在文本框输入字符边对输入的字数进行检查本来不难的,但是由于其中有些函数的使用方式大家容易混乱,很容易导致整个结果搞来搞去也没有搞出来,也容易出Bugs,注意这里不能再使用length函数了,因为这个东西英文算一个字符,汉字也算一个字符,不符合数据传递的形式。也不能用OnChange事件了,这事件要光标离开为文本框才会触发,必须改成更加即时的OnKeyUp。

一、基本目标

如下图,完成一个仿新浪微博的,不用任何插件,纯Javascript无JQuery的带字数统计的输入框,如果超出字数则给出相应的提示。

英文算半个字,中文才算1个字。

JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

二、基本布局

没什么好说的。主要是提示文字给一个ID=test,字数统计的地方因为时时变更,因此也要给出一个ID=wordLength,之后脚本处的inputTest函数,又文本框的onkeyup事件触发,同时把自己此刻的值传递过去。同时注意到,字数统计的地方之所以与新浪微博的部分相似,就是因为新浪微博那里用了Georgia字体,这字体显示的数字比较独特。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入字数检查</title>
</head>
<body>
<p id="test"></p>
<span><input type="text" onkeyup="inputTest(this.value)" placeholder="请在此输入" /></span><span id="wordLength" style="font-family:Georgia;">0/10</span>
</body>
</html>

三、核心脚本

<script>
//获取长度函数
//这里不能用封装好的方法,因为length方法,英文算一个字符,中文也算一个字符
function getStrLength(str){
  //传递一个字符串过来
  var mylen=0;
  //遍历这个字符串
  for(var i=0;i<str.length;i++){
    //如果字符串的第i个字符的Unicode码在0-128之间就是英文字符,应该算一个长度
    if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128){
      mylen++;
    }else{
      //否则算两个长度
      mylen+=2;
    }
  }
  return mylen;
}
//输入当字符数变更就触发这个函数
function inputTest(value){
  //先调getStrLength用统计当前文本框中所含文本的值,因为getStrLength统计出来的东西是英文字符长度,所以要除以2,强行转换为整形
  //再补上/10替换wordLength中的文本,/应该被转义,否则在某些编译器中无法通过,例如Dreamwaver
  document.getElementById("wordLength").innerHTML=parseInt(getStrLength(value)/2)+"\/10";
  //如果超过10个字,20个字符
  if(parseInt(getStrLength(value))>20){
    //那么把警告内容显示出来,并把其中的颜色设置为红色,当然,你在HTML那里设置也可以
    document.getElementById("test").style.display="block";
    document.getElementById("test").innerHTML="太长,请修改至10字之内";
    document.getElementById("test").style.color="#ff0000";
  }
  else{
    //否则隐藏警告内容
    document.getElementById("test").innerHTML="";
    document.getElementById("test").style.display="none";
  }
}
</script>

PS:这里再为大家推荐2款功能相似的在线工具:

在线字数统计工具:
http://tools.3water.com/code/zishutongji

在线字符统计与编辑工具:
http://tools.3water.com/code/char_tongji

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
详解JS预解析原理
Jun 16 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
Vue from-validate 表单验证的示例代码
Sep 26 #Javascript
微信小程序之蓝牙的链接
Sep 26 #Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
微信小程序中post方法与get方法的封装
Sep 26 #Javascript
You might like
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python的id()函数介绍
2013/02/10 Python
Python中处理时间的几种方法小结
2015/04/09 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python制作小说爬虫实录
2017/08/14 Python
python的中异常处理机制
2018/08/30 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
修理厂厂长岗位职责
2014/01/30 职场文书
妈妈活动方案
2014/08/15 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
寒假安全保证书
2015/02/28 职场文书
音乐课外活动总结
2015/05/09 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python