结合Vue控制字符和字节的显示个数的示例


Posted in Javascript onMay 17, 2018

需求

需求:结合Vue实现下面的效果

  1. 输入框中最多输入16个字符
  2. 汉字最多显示5个,超出部分以...显示
  3. 英文最多显示10个,超出部分以...显示

实现

搭建简单页面,并设置简单样式

在正式开始写核心代码之前,要先把代码结构搭建起来,这样后面写的时候就会看着简洁点了。

首先需要一个输入框用来输入内容,其次需要一个元素,用来显示输入框中的内容,实现数据的双向绑定。

其中,输入内容的最大长度是可以通过input标签的属性来指定的。

<div id="app">
 <input v-model="txt" class="clsinp" maxlength="16" placeholder="请输入内容" type="text">
 <div class="clsmsg">
  <p>内容:<span>{{txt}}</span></p>
  <p>输入的字符个数:<span>{{computedCharLen}}</span></p>
  <p>输入的字节个数:<span>{{computedByteLen}}</span></p>
 </div>
</div>

页面的结构已经搭建完成了,那下面就是做一些简单的样式优化了。

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { background: #efefef; }
.clsinp { width: 100%; height: 40px; outline: none; line-height: 40px; font-size: 16px; padding: 0 10px; margin-top: 20px; color: blue; }
.clsmsg { padding: 10px 10px; }
.clsmsg span { color: blue; }

最后一步应该就是引入Vue,然后搭建一些简单的数据内容。

var vm = new Vue({
 el: '#app',
 data() {
  return {
   txt: ''
  }
 },
 // 后期代码在下面补充
})

ASCII范围内与范围外

了解ASCII的内容,请移步到http://www.asciima.com/

ASCII中包含256个字符,因此超过256之外的字符,全部都是非ASCII字符,一般情况下,汉字就是在这个范围中。

因此,编码不在0-255的字符可以使用正则表达式/[^\x00-\xff]/g来进行匹配。这个时候就提供了一个思路,如果不是ASCII码中的字符,那么就默认它占了两个字节。

我们修改一下页面结构,输出一些测试信息:

<div id="app">
 <input v-model="txt" class="clsinp" maxlength="16" placeholder="请输入内容" type="text">
 <div class="clsmsg">
  <p>内容:<span>{{txt}}</span></p>
  <p>输入的字符个数:<span>{{computedCharLen}}</span></p>
  <p>输入的字节个数:<span>{{computedByteLen}}</span></p>
 </div>
</div>

补充需要的计算属性:

computed: {
 // 获取字符的个数
 computedCharLen() {
  return this.txt.length
 },
 // 获取字节的个数
 computedByteLen() {
  return this.txt.replace(/[^\x00-\xff]/g, '01').length
 }
}

这个时候,我们输入内容,出现下面的效果:

结合Vue控制字符和字节的显示个数的示例

这个时候会发现,已经实现,ASCII码范围内的占1位,超出范围的占2位。

控制显示的内容

内容显示使用计算属性来实现:

<p>内容:<span>{{computedTxt}}</span></p>
// 控制显示的内容
computedTxt() {
 return this.methodGetByteLen(this.txt, 10)
}

下面补充一下methodGetByteLen方法:

/**
 * str 需要控制的字符串
 * len 字节的长度,如5个汉字,10个英文,输入参数就是10
 */
methodGetByteLen(str, len) {
 // 如果字节的长度小于控制的长度,那么直接返回
 if (this.computedByteLen <= len) {
  return str
 }
 for (let i = Math.floor(len / 2); i < str.length; i++) {
  if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
   // Math.floor(i / 2) * 这里是控制特殊情况的显示
   // 如 '一二aaa一二三四',显示的结果就是 '一二aaa一...'
   return str.substr(0, Math.floor(i / 2) * 2) + '...'
  }
 }
}

最终的显示情况没有超过最大指定长度的情况

结合Vue控制字符和字节的显示个数的示例

超过最大指定长度(汉字输入)

结合Vue控制字符和字节的显示个数的示例

超过最大指定长度(数字输入)

结合Vue控制字符和字节的显示个数的示例

超过最大指定长度(汉字和字母的组合)

结合Vue控制字符和字节的显示个数的示例

完整代码

最后,把最终代码粘贴出来:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta txt="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
  }

  body {
   background: #efefef;
  }

  .clsinp {
   width: 100%;
   height: 40px;
   outline: none;
   line-height: 40px;
   font-size: 16px;
   padding: 0 10px;
   margin-top: 20px;
   color: blue;
  }

  .clsmsg {
   padding: 10px 10px;
  }

  .clsmsg span {
   color: blue;
  }

 </style>
</head>

<body>
 <div id="app">
  <input v-model="txt" class="clsinp" maxlength="16" placeholder="请输入内容" type="text">
  <div class="clsmsg">
   <p>内容:<span>{{computedTxt}}</span></p>
   <p>输入的字符个数:<span>{{computedCharLen}}</span></p>
   <p>输入的字节个数:<span>{{computedByteLen}}</span></p>
  </div>
 </div>
</body>

</html>

<script type="text/javascript" src="./vue2.5.1.js"></script>
<script type="text/javascript">
 var vm = new Vue({
  el: '#app',
  data() {
   return {
    txt: ''
   }
  },
  // 后期代码在下面补充
  methods: {
   methodGetByteLen(str, len) {
    if (this.computedByteLen <= len) {
     return str
    }
    for (let i = Math.floor(len / 2); i < str.length; i++) {
     if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
      return str.substr(0, Math.floor(i / 2) * 2) + '...'
     }
    }
   }
  },
  computed: {
   // 获取字符的个数
   computedCharLen() {
    return this.txt.length
   },
   // 获取字节的个数
   computedByteLen() {
    return this.txt.replace(/[^\x00-\xff]/g, '01').length
   },
   // 控制显示的内容
   computedTxt() {
    return this.methodGetByteLen(this.txt, 10)
   }
  }
 })

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
AngularJS实现的base64编码与解码功能示例
May 17 #Javascript
解决修复npm安装全局模块权限的问题
May 17 #Javascript
npm 下载指定版本的组件方法
May 17 #Javascript
ES6之模版字符串的具体使用
May 17 #Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 #Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 #Javascript
You might like
相对路径转化成绝对路径
2007/04/10 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
使用python分析git log日志示例
2014/02/27 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
在django模板中实现超链接配置
2019/08/21 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
公司活动总结范文
2014/07/01 职场文书
实习证明模板
2015/06/16 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
bose降噪耳机音能消除人声吗
2022/04/19 数码科技
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android