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 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
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
hadoop中一些常用的命令介绍
2013/06/19 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
产品销售计划书
2014/05/04 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
导游词幽默开场白
2019/06/26 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis