国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

figofuture / 3220人閱讀

摘要：但是有時候我們需要實現(xiàn)文本框中輸入中文長度是或是，其他非中文輸入是。因為中文輸入法的在非正式輸入時，對于我們這個算法，會出現(xiàn)剩余字符數(shù)為負值的情況。

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

　　在做開發(fā)時，有一種需求是對輸入框(input,textarea)的字數(shù)做限制。如果按照JS的規(guī)定，字符串里所有的字符，長度都是1。但是有時候我們需要實現(xiàn)文本框中輸入中文長度是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
  }

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

接下來就是對輸入的字符串長度進行限制：

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

   　　　 
   　　　 
   　　　 還可以輸入{{codeNum}}個字符

　maxlegth需要給定一個預(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個占位，所以傳入的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是因為非中文的len只算0.5
      if (leftLen === 0) {
        return false // 如果剩余數(shù)是0,就退出循環(huán)，不能輸入了
      }
      len = len + 0.5// 如果輸入非中文，算加半個字符，maxlengtrh也加0.5,這樣就實現(xiàn)了兩個非中文長度等于一個中文
      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的值。這個值是動態(tài)的，在只輸入中文的情況下，這個值等于我們的預(yù)設(shè)值，如果輸入兩個非中文，maxlength就會動態(tài)的加1。

　　vue watch監(jiān)聽剩余字數(shù),并截斷多出的字符。因為中文輸入法的在非正式輸入時，對于我們這個算法，會出現(xiàn)剩余字符數(shù)為負值的情況。所以需要增加以下代碼，在輸入數(shù)量超過時截斷。

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)// 每推出一個，將數(shù)組轉(zhuǎn)為字符串，做一次占位數(shù)判斷
            this.title = arr.join("")
            if (getStringLengthForChinese(this.title) <= 30) {
              break
            }
          }
        }
      }
    }

最終效果：

完整demo（vue寫的）：





  
  
  
  Document
  



  

  還能輸入{{codeNum}}

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96683.html

相關(guān)文章

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

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

    ShowerSun 評論0 收藏0

  • 表單腳本

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

    wangtdgoodluck 評論0 收藏0

  • JavaScript 表單腳本——“文本框腳本”的注意要點

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

    kk_miles 評論0 收藏0

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

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

    JouyPub 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<