資訊專欄INFORMATION COLUMN
摘要：功能產(chǎn)品需求需要限制字符長度為。中文個字符英文個字符考慮場景中文問題光標定位問題字符串截取問題。獲取設置完后的長度獲取原光標后有幾個字符設置光標位置參考文獻
功能
產(chǎn)品需求：input 需要限制字符長度為 10。（中文 2 個字符英文 1 個字符）實現(xiàn)思路
考慮場景：input 中文問題、光標定位問題、字符串截取問題。
實現(xiàn)上述需求需監(jiān)聽 3 個事件：input compositionupdate compositionend
獲取光標位置function getCursortPosition(obj) {
var cursorIndex = 0;
if (document.selection) {
// IE Support
obj.focus();
var range = document.selection.createRange();
range.moveStart("character", -obj.value.length);
cursorIndex = range.text.length;
} else if (obj.selectionStart || obj.selectionStart == 0) {
// another support
cursorIndex = obj.selectionStart;
}
return cursorIndex;
}
功能實現(xiàn)
let flag = true; //設定全局變量在輸入中文過程中不執(zhí)行賦值操作
$("#input")
.on("input", function(e) {
setMaxlen(this);
})
.on("compositionupdate", function() {
flag = false;
})
.on("compositionend", function() {
flag = true;
setMaxlen(this);
});
/**
* @param {object} el DOM元素
*/
function setMaxlen(el) {
let val = $(el).val(), //獲取value
maxLen = $(el).data("max"), //獲取限制輸入的最大值
len = val.replace(/[^x00-xff]/g, "**").length, //獲取input長度
startLen = getCursortPosition(el), //獲取光標位置
endLen = val.substring(startLen).replace(/[^x00-xff]/g, "**").length; //光標后面有幾個字符(計算后的)
if (flag && len > maxLen) {
let num = maxLen - endLen,//求出光標前面剩余的字符長度
str = val.substring(0, maxLen - endLen);//截取長度
while (str.replace(/[^x00-xff]/g, "**").length > num) {//因涉及中文,循環(huán)截取
if (str.length === 0) {
str = "";
break;
}
str = str.substring(0, str.length - 1);
}
$(el).val(str + val.substring(startLen));//設置value
//設置完value后需要重新設置下光標的位置。
let newStrLen = $(el).val().length,//獲取設置完value后的長度
setEnd = val.substring(startLen).length;//獲取原input光標后有幾個字符
el.setSelectionRange(newStrLen - setEnd, newStrLen - setEnd);//設置光標位置
}
}
參考文獻
https://www.jianshu.com/p/19a...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109578.html
摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內(nèi)容長度的檢測。當然如果發(fā)現(xiàn)輸入框內(nèi)容超過限制，要將光標停留在輸入框內(nèi)，方便用戶進行修改。 前言 最近產(chǎn)品需要做不少輸入框，產(chǎn)品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經(jīng)輸入的字符個數(shù)，當超過數(shù)量限制時輸入框邊框變紅，同時給用戶提示信息。 這交互聽起來沒啥問題，技術(shù)實現(xiàn)上似...
摘要：但是有時候我們需要實現(xiàn)文本框中輸入中文長度是或是，其他非中文輸入是。因為中文輸入法的在非正式輸入時，對于我們這個算法，會出現(xiàn)剩余字符數(shù)為負值的情況。 textarea,input輸入字符數(shù)限制。 在做開發(fā)時，有一種需求是對輸入框(input,textarea)的字數(shù)做限制。如果按照JS的規(guī)定，字符串里所有的字符，長度都是1。但是有時候我們需要實現(xiàn)文本框中輸入中文長度是2（或是３），...
摘要：限制表單的數(shù)據(jù)集的值必須為字符而支持整個字符集通用字符集。因此對于提交時，傳輸數(shù)據(jù)就會受到長度的限制。但實際各個服務器會規(guī)定對提交數(shù)據(jù)大小進行限制，都有各自的配置。這一般用于識別該用戶是否擁有合法的操作權(quán)限，提高了數(shù)據(jù)的安全性。 這里排版可能不是太好，詳情看我的簡書 form表單有什么作用？ 表單的作用是搜集用戶的輸入，用戶提交表單時向服務器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與web服務器的交互。...
摘要：結(jié)合和簡單的正則就可以實現(xiàn)一個文本計算函數(shù)其實當字符計算解決后，輸入框限制字符數(shù)就輕而易舉了。思路就是每次事件發(fā)生時，先判斷當前字符數(shù)是否超過限制，如果超出，則用上一次的文本替換當前輸入框的文本。 一個emoji文本用javascript該如何正確計算其文本長度？最容易想到的自然是用length來求長度。以下列舉常見emoji和復雜emoji。 // size: 2 ?.length ...
閱讀 3243·2021-11-23 09:51
閱讀 3701·2021-09-22 15:35
閱讀 3675·2021-09-22 10:02
閱讀 2989·2021-08-30 09:49
閱讀 550·2021-08-05 10:01
閱讀 3416·2019-08-30 15:54
閱讀 1693·2019-08-30 15:53
閱讀 3586·2019-08-29 16:27
