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

資訊專欄INFORMATION COLUMN

input限制輸入長度

toddmark / 782人閱讀

摘要：功能產品需求需要限制字符長度為。中文個字符英文個字符考慮場景中文問題光標定位問題字符串截取問題。獲取設置完后的長度獲取原光標后有幾個字符設置光標位置參考文獻

功能 
產品需求：input 需要限制字符長度為 10。（中文 2 個字符英文 1 個字符）
考慮場景：input 中文問題、光標定位問題、字符串截取問題。
實現思路

實現上述需求需監聽 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;
}
功能實現 
let flag = true; //設定全局變量在輸入中文過程中不執行賦值操作
$("#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) {//因涉及中文,循環截取
      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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109578.html

相關文章

  • 說一說限制字數的輸入框踩的坑

    摘要：所以最后犧牲了下用戶體驗，找到了一個折中的方式輸入框失去焦點時即，或者用戶輸入回車鍵時才進行內容長度的檢測。當然如果發現輸入框內容超過限制，要將光標停留在輸入框內，方便用戶進行修改。 前言 最近產品需要做不少輸入框，產品想要的交互效果是：用戶可以輸入中英文，隨著用戶輸入能實時顯示已經輸入的字符個數，當超過數量限制時輸入框邊框變紅，同時給用戶提示信息。 這交互聽起來沒啥問題，技術實現上似...

    luck 評論0 收藏0

  • textarea,input輸入字符數限制。

    摘要：但是有時候我們需要實現文本框中輸入中文長度是或是，其他非中文輸入是。因為中文輸入法的在非正式輸入時，對于我們這個算法，會出現剩余字符數為負值的情況。 textarea,input輸入字符數限制。 　　在做開發時，有一種需求是對輸入框(input,textarea)的字數做限制。如果按照JS的規定，字符串里所有的字符，長度都是1。但是有時候我們需要實現文本框中輸入中文長度是2（或是３），...

    figofuture 評論0 收藏0

  • 有關form表單常被問到的知識點

    摘要：限制表單的數據集的值必須為字符而支持整個字符集通用字符集。因此對于提交時，傳輸數據就會受到長度的限制。但實際各個服務器會規定對提交數據大小進行限制，都有各自的配置。這一般用于識別該用戶是否擁有合法的操作權限，提高了數據的安全性。 這里排版可能不是太好，詳情看我的簡書 form表單有什么作用？ 表單的作用是搜集用戶的輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與web服務器的交互。...

    kohoh_ 評論0 收藏0

  • 如何實現emoji文本字數計算？以及輸入框限制指定字符數？

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

    ShowerSun 評論0 收藏0

發表評論

0條評論

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