成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

textarea,input輸入字符數(shù)限制。

figofuture / 3239人閱讀

摘要：但是有時(shí)候我們需要實(shí)現(xiàn)文本框中輸入中文長度是或是，其他非中文輸入是。因?yàn)橹形妮斎敕ǖ脑诜钦捷斎霑r(shí)，對(duì)于我們這個(gè)算法，會(huì)出現(xiàn)剩余字符數(shù)為負(fù)值的情況。

textarea,input輸入字符數(shù)限制。

　　在做開發(fā)時(shí)，有一種需求是對(duì)輸入框(input,textarea)的字?jǐn)?shù)做限制。如果按照J(rèn)S的規(guī)定，字符串里所有的字符，長度都是1。但是有時(shí)候我們需要實(shí)現(xiàn)文本框中輸入中文長度是2（或是３），其他非中文輸入是１。這個(gè)時(shí)候就需要自己寫一段代碼來判斷：

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進(jìn)制表示，也可以用十進(jìn)制
        bytesCount = bytesCount + 1
      } else {
        bytesCount = bytesCount + 2
      }
    }
    return bytesCount
  }

這樣就實(shí)現(xiàn)了獲取一段字符串的長度，中文為2。

接下來就是對(duì)輸入的字符串長度進(jìn)行限制：

　　在input和textarea中，輸入的長度限制需要添加maxlength屬性。通常情況下，只要給maxlength一個(gè)固定的值就能解決問題。但是這里由于我們的中文預(yù)設(shè)長度是２。所以maxlegth的值應(yīng)該是動(dòng)態(tài)設(shè)置的。
　　
　　我用vue來寫，只要在模板中給maxlength綁定一個(gè)值：

   　　　 
   　　　 
   　　　 還可以輸入{{codeNum}}個(gè)字符

　maxlegth需要給定一個(gè)預(yù)設(shè)值。
　下面是限制字符輸入數(shù)量的方法：

function computedLen(str, totalLength, maxLength) {
  let rep = /[0-9a-zA-Z|s]/ // 正則判斷字母數(shù)字
  let strArr = str.split("")
  let totalLen = totalLength// 總的輸入長度
  let maxLen = maxLength// input或textarea上maxlength的值，這里由于中文算2個(gè)占位，所以傳入的maxLength應(yīng)該為totalLength的一半
  let len = 0 // 已經(jīng)輸入的字符數(shù)
  let leftLen = 0 // 剩余可輸入字符數(shù)

  strArr.forEach((val,key) => {
    if (rep.test(val)) {
      leftLen = Math.ceil(totalLen - len * 2)// 剩余輸入數(shù)等于總長 - 輸入數(shù)，乘以2是因?yàn)榉侵形牡膌en只算0.5
      if (leftLen === 0) {
        return false // 如果剩余數(shù)是0,就退出循環(huán)，不能輸入了
      }
      len = len + 0.5// 如果輸入非中文，算加半個(gè)字符，maxlengtrh也加0.5,這樣就實(shí)現(xiàn)了兩個(gè)非中文長度等于一個(gè)中文
      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)
      }

　　上面代碼的關(guān)鍵在于獲取maxlength的值。這個(gè)值是動(dòng)態(tài)的，在只輸入中文的情況下，這個(gè)值等于我們的預(yù)設(shè)值，如果輸入兩個(gè)非中文，maxlength就會(huì)動(dòng)態(tài)的加1。

　　vue watch監(jiān)聽剩余字?jǐn)?shù),并截?cái)喽喑龅淖址?。因?yàn)橹形妮斎敕ǖ脑?strong>非正式輸入時(shí)，對(duì)于我們這個(gè)算法，會(huì)出現(xiàn)剩余字符數(shù)為負(fù)值的情況。所以需要增加以下代碼，在輸入數(shù)量超過時(shí)截?cái)唷?/p> 

watch: {
      "title" () {
        this.codeNum = 30 - this.getStringLengthForChinese(this.title)
        if (getStringLengthForChinese(this.title) > 30) {//如果占位數(shù)大于30
          let arr = this.title.split("")//　輸入字符串轉(zhuǎn)為數(shù)組，依次推出最后一位元素
          for (let i = arr.length - 1; i >= 0; i--) {
            arr = arr.slice(0, i)// 每推出一個(gè)，將數(shù)組轉(zhuǎn)為字符串，做一次占位數(shù)判斷
            this.title = arr.join("")
            if (getStringLengthForChinese(this.title) <= 30) {
              break
            }
          }
        }
      }
    }

最終效果：

完整demo（vue寫的）：





  
  
  
  Document
  



  

  還能輸入{{codeNum}}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96683.html

相關(guān)文章

  • 如何實(shí)現(xiàn)emoji文本字數(shù)計(jì)算？以及輸入框限制指定字符數(shù)？

    摘要：結(jié)合和簡單的正則就可以實(shí)現(xiàn)一個(gè)文本計(jì)算函數(shù)其實(shí)當(dāng)字符計(jì)算解決后，輸入框限制字符數(shù)就輕而易舉了。思路就是每次事件發(fā)生時(shí)，先判斷當(dāng)前字符數(shù)是否超過限制，如果超出，則用上一次的文本替換當(dāng)前輸入框的文本。 一個(gè)emoji文本用javascript該如何正確計(jì)算其文本長度？最容易想到的自然是用length來求長度。以下列舉常見emoji和復(fù)雜emoji。 // size: 2 ?.length ...

    ShowerSun 評(píng)論0 收藏0

  • 表單腳本

    摘要：表單如果表單內(nèi)沒有按鈕，只有元素，那么這個(gè)可以升級(jí)為按鈕。輸入框選中高亮，輸入非數(shù)字，改變顏色可設(shè)置，不能設(shè)置而則可以，但不能設(shè)置最大字符數(shù)。 form 表單 如果form表單內(nèi)沒有submit按鈕，只有button元素，那么這個(gè)button可以升級(jí)為submit按鈕。 form 表單用來向服務(wù)器提交信息，常用屬性 action：提交表單的地址 name：頁面中可能不止一個(gè)表單，...

    wangtdgoodluck 評(píng)論0 收藏0

  • JavaScript 表單腳本——“文本框腳本”的注意要點(diǎn)

    摘要：屬性可以設(shè)置文本框的初始值。特性則是用于指定文本框內(nèi)可以接受的最大字符數(shù)。與這個(gè)方法對(duì)應(yīng)的事件，在選擇了文本框中的文本時(shí)事件觸發(fā)。如阻止用戶選擇要調(diào)用之前或之后立即將焦點(diǎn)設(shè)置到文本框。 在HTML中，有兩種方式來表現(xiàn)文本框： 一種是使用input元素的單行文本，另一種是使用textarea的多行文本框。 使用input方式，必須添加type，設(shè)置為text。 size特性，可以指定文...

    kk_miles 評(píng)論0 收藏0

  • HTML表單（來自MDN的總結(jié)）

    摘要：多個(gè)標(biāo)簽原生表單部件通用屬性默認(rèn)這個(gè)布爾屬性允許您指定當(dāng)頁面加載時(shí)元素應(yīng)該自動(dòng)具有輸入焦點(diǎn)，除非用戶覆蓋它，例如通過鍵入不同的控件。元素的名稱這是用于表單數(shù)據(jù)提交的。到目前為止，表單是最常見的攻擊媒介可能發(fā)生攻擊的地方。 表單介紹 HTML表單是用戶和web站點(diǎn)或應(yīng)用程序之間交互的主要內(nèi)容之一。它們?cè)试S用戶將數(shù)據(jù)發(fā)送到web站點(diǎn)。大多數(shù)情況下，數(shù)據(jù)被發(fā)送到web服務(wù)器，但是web頁面也...

    JouyPub 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<