textarea,input输入字符数限制。

figofuture 发布于2019-08-23 10:47 / 2898人阅读

摘要：但是有时候我们需要实现文本框中输入中文长度是或是，其他非中文输入是。因为中文输入法的在非正式输入时，对于我们这个算法，会出现剩余字符数为负值的情况。

textarea,input输入字符数限制。

　　在做开发时，有一种需求是对输入框(input,textarea)的字数做限制。如果按照JS的规定，字符串里所有的字符，长度都是1。但是有时候我们需要实现文本框中输入中文长度是2（或是３），其他非中文输入是１。这个时候就需要自己写一段代码来判断：

function getStringLengthForChinese (val) {
    let str = val.toString()
    let bytesCount = 0
    for (let i = 0, len = str.length; i < len; i++) {
      let c = str.charCodeAt(i)
      if ((c > 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) { //这里是16进制表示，也可以用十进制
        bytesCount = bytesCount + 1
      } else {
        bytesCount = bytesCount + 2
      }
    }
    return bytesCount
  }

这样就实现了获取一段字符串的长度，中文为2。

接下来就是对输入的字符串长度进行限制：

　　在input和textarea中，输入的长度限制需要添加maxlength属性。通常情况下，只要给maxlength一个固定的值就能解决问题。但是这里由于我们的中文预设长度是２。所以maxlegth的值应该是动态设置的。
　　
　　我用vue来写，只要在模板中给maxlength绑定一个值：

   　　　 
   　　　 
   　　　 还可以输入{{codeNum}}个字符

　maxlegth需要给定一个预设值。
　下面是限制字符输入数量的方法：

function computedLen(str, totalLength, maxLength) {
  let rep = /[0-9a-zA-Z|s]/ // 正则判断字母数字
  let strArr = str.split("")
  let totalLen = totalLength// 总的输入长度
  let maxLen = maxLength// input或textarea上maxlength的值，这里由于中文算2个占位，所以传入的maxLength应该为totalLength的一半
  let len = 0 // 已经输入的字符数
  let leftLen = 0 // 剩余可输入字符数

  strArr.forEach((val,key) => {
    if (rep.test(val)) {
      leftLen = Math.ceil(totalLen - len * 2)// 剩余输入数等于总长 - 输入数，乘以2是因为非中文的len只算0.5
      if (leftLen === 0) {
        return false // 如果剩余数是0,就退出循环，不能输入了
      }
      len = len + 0.5// 如果输入非中文，算加半个字符，maxlengtrh也加0.5,这样就实现了两个非中文长度等于一个中文
      maxLen = maxLen + 0.5
    } else {
      len = len + 1
    }
  })
  return {
    maxLen: Math.ceil(maxLen) // 返回我们需要的maxlegt的值
  }
}

function textareaChange (e) {
        setTimeout(() => {
          let count = this.computedLen(e.target.value, 30, 15)
          this.maxLength = count.maxLen
        }, 200)
      }

　　上面代码的关键在于获取maxlength的值。这个值是动态的，在只输入中文的情况下，这个值等于我们的预设值，如果输入两个非中文，maxlength就会动态的加1。

　　vue watch监听剩余字数,并截断多出的字符。因为中文输入法的在非正式输入时，对于我们这个算法，会出现剩余字符数为负值的情况。所以需要增加以下代码，在输入数量超过时截断。

watch: {
      "title" () {
        this.codeNum = 30 - this.getStringLengthForChinese(this.title)
        if (getStringLengthForChinese(this.title) > 30) {//如果占位数大于30
          let arr = this.title.split("")//　输入字符串转为数组，依次推出最后一位元素
          for (let i = arr.length - 1; i >= 0; i--) {
            arr = arr.slice(0, i)// 每推出一个，将数组转为字符串，做一次占位数判断
            this.title = arr.join("")
            if (getStringLengthForChinese(this.title) <= 30) {
              break
            }
          }
        }
      }
    }

最终效果：

完整demo（vue写的）：





  
  
  
  Document
  


  

  还能输入{{codeNum}}

超融合服务器 idc机房托管在textarea输入Tab input输入值 js获取input输入数据 js正则input输入框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96683.html

如何实现emoji文本字数计算？以及输入框限制指定字符数？

摘要：结合和简单的正则就可以实现一个文本计算函数其实当字符计算解决后，输入框限制字符数就轻而易举了。思路就是每次事件发生时，先判断当前字符数是否超过限制，如果超出，则用上一次的文本替换当前输入框的文本。一个emoji文本用javascript该如何正确计算其文本长度？最容易想到的自然是用length来求长度。以下列举常见emoji和复杂emoji。 // size: 2 ?.length ...

ShowerSun 2019-08-21 17:47 评论0 收藏0
表单脚本

摘要：表单如果表单内没有按钮，只有元素，那么这个可以升级为按钮。输入框选中高亮，输入非数字，改变颜色可设置，不能设置而则可以，但不能设置最大字符数。 form 表单如果form表单内没有submit按钮，只有button元素，那么这个button可以升级为submit按钮。 form 表单用来向服务器提交信息，常用属性 action：提交表单的地址 name：页面中可能不止一个表单，...

wangtdgoodluck 2019-08-22 18:42 评论0 收藏0
JavaScript 表单脚本——“文本框脚本”的注意要点

摘要：属性可以设置文本框的初始值。特性则是用于指定文本框内可以接受的最大字符数。与这个方法对应的事件，在选择了文本框中的文本时事件触发。如阻止用户选择要调用之前或之后立即将焦点设置到文本框。在HTML中，有两种方式来表现文本框：一种是使用input元素的单行文本，另一种是使用textarea的多行文本框。使用input方式，必须添加type，设置为text。 size特性，可以指定文...

kk_miles 2019-08-19 17:27 评论0 收藏0
HTML表单（来自MDN的总结）

摘要：多个标签原生表单部件通用属性默认这个布尔属性允许您指定当页面加载时元素应该自动具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。元素的名称这是用于表单数据提交的。到目前为止，表单是最常见的攻击媒介可能发生攻击的地方。表单介绍 HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也...

JouyPub 2019-08-02 11:15 评论0 收藏0