input限制输入长度

toddmark 发布于2019-08-26 13:48 / 869人阅读

摘要：功能产品需求需要限制字符长度为。中文个字符英文个字符考虑场景中文问题光标定位问题字符串截取问题。获取设置完后的长度获取原光标后有几个字符设置光标位置参考文献

功能

</>复制代码 
产品需求：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...

云服务器 GPU云服务器 iOS限制输入长度 input输入值 js获取input输入数据 js正则input输入框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109578.html

说一说限制字数的输入框踩的坑

摘要：所以最后牺牲了下用户体验，找到了一个折中的方式输入框失去焦点时即，或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制，要将光标停留在输入框内，方便用户进行修改。前言最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。这交互听起来没啥问题，技术实现上似...

luck 2019-08-21 14:16 评论0 收藏0
textarea,input输入字符数限制。

摘要：但是有时候我们需要实现文本框中输入中文长度是或是，其他非中文输入是。因为中文输入法的在非正式输入时，对于我们这个算法，会出现剩余字符数为负值的情况。 textarea,input输入字符数限制。　　在做开发时，有一种需求是对输入框(input,textarea)的字数做限制。如果按照JS的规定，字符串里所有的字符，长度都是1。但是有时候我们需要实现文本框中输入中文长度是2（或是３），...

figofuture 2019-08-23 10:47 评论0 收藏0
有关form表单常被问到的知识点

摘要：限制表单的数据集的值必须为字符而支持整个字符集通用字符集。因此对于提交时，传输数据就会受到长度的限制。但实际各个服务器会规定对提交数据大小进行限制，都有各自的配置。这一般用于识别该用户是否拥有合法的操作权限，提高了数据的安全性。这里排版可能不是太好，详情看我的简书 form表单有什么作用？表单的作用是搜集用户的输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。...

kohoh_ 2019-08-01 16:50 评论0 收藏0
如何实现emoji文本字数计算？以及输入框限制指定字符数？

摘要：结合和简单的正则就可以实现一个文本计算函数其实当字符计算解决后，输入框限制字符数就轻而易举了。思路就是每次事件发生时，先判断当前字符数是否超过限制，如果超出，则用上一次的文本替换当前输入框的文本。一个emoji文本用javascript该如何正确计算其文本长度？最容易想到的自然是用length来求长度。以下列举常见emoji和复杂emoji。 // size: 2 ?.length ...

ShowerSun 2019-08-21 17:47 评论0 收藏0