摘要:但是有時候我們需要實現文本框中輸入中文長度是或是,其他非中文輸入是。因為中文輸入法的在非正式輸入時,對于我們這個算法,會出現剩余字符數為負值的情況。
textarea,input輸入字符數限制。
在做開發時,有一種需求是對輸入框(input,textarea)的字數做限制。如果按照JS的規定,字符串里所有的字符,長度都是1。但是有時候我們需要實現文本框中輸入中文長度是2(或是3),其他非中文輸入是1。這個時候就需要自己寫一段代碼來判斷:
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一個固定的值就能解決問題。但是這里由于我們的中文預設長度是2。所以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
還能輸入30
- new Vue({
- el: "#app",
- data() {
- return {
- title: "",
- maxLength: 15,
- codeNum: 30
- }
- },
- methods: {
- 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
- },
- textareaChange(e) {
- setTimeout(() => {
- let count = this.computedLen(e.target.value, 30, 15)
- this.maxLength = count.maxLen
- }, 200)
- },
- 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的值
- }
- }
- },
- 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
- }
- }
- }
- }
- }
- })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/96683.html
摘要:結合和簡單的正則就可以實現一個文本計算函數其實當字符計算解決后,輸入框限制字符數就輕而易舉了。思路就是每次事件發生時,先判斷當前字符數是否超過限制,如果超出,則用上一次的文本替換當前輸入框的文本。 一個emoji文本用javascript該如何正確計算其文本長度?最容易想到的自然是用length來求長度。以下列舉常見emoji和復雜emoji。 // size: 2 ?.length ...
摘要:表單如果表單內沒有按鈕,只有元素,那么這個可以升級為按鈕。輸入框選中高亮,輸入非數字,改變顏色可設置,不能設置而則可以,但不能設置最大字符數。 form 表單 如果form表單內沒有submit按鈕,只有button元素,那么這個button可以升級為submit按鈕。 form 表單用來向服務器提交信息,常用屬性 action:提交表單的地址 name:頁面中可能不止一個表單,...
摘要:屬性可以設置文本框的初始值。特性則是用于指定文本框內可以接受的最大字符數。與這個方法對應的事件,在選擇了文本框中的文本時事件觸發。如阻止用戶選擇要調用之前或之后立即將焦點設置到文本框。 在HTML中,有兩種方式來表現文本框: 一種是使用input元素的單行文本,另一種是使用textarea的多行文本框。 使用input方式,必須添加type,設置為text。 size特性,可以指定文...
摘要:多個標簽原生表單部件通用屬性默認這個布爾屬性允許您指定當頁面加載時元素應該自動具有輸入焦點,除非用戶覆蓋它,例如通過鍵入不同的控件。元素的名稱這是用于表單數據提交的。到目前為止,表單是最常見的攻擊媒介可能發生攻擊的地方。 表單介紹 HTML表單是用戶和web站點或應用程序之間交互的主要內容之一。它們允許用戶將數據發送到web站點。大多數情況下,數據被發送到web服務器,但是web頁面也...
閱讀 2583·2021-11-22 13:53
閱讀 4098·2021-09-28 09:47
閱讀 879·2021-09-22 15:33
閱讀 825·2020-12-03 17:17
閱讀 3324·2019-08-30 13:13
閱讀 2130·2019-08-29 16:09
閱讀 1185·2019-08-29 12:24
閱讀 2458·2019-08-28 18:14