iOS 输入框如何限制字符长度和emoji

我们经常会遇到这样的需求,比如手机输入框限制 11 位数字,个人简介最多不超过英文最多 100 个字,中文最多 50 个字,个人昵称不能使用 emoji 表情等等。

在上一篇文章了解了编码的基础上,我们来看下如何解决这些需求问题。

我们可以知道 emoji 表情其实是由一个或多个 Unicode 编码点组成的字符,而且 emoji 表情对应这一定的码元范围。

因此这里如果要判断一个字符串里面是否包含 emoji 表情,就要解决两个问题:

在iOS中 NSString 可以通过 enumerateSubstringsInRange:options:usingBlock: 方法。这个方法把 Unicode 抽象的地方隐藏了,能让你更轻松的循环字符串里面的组合字符串,单词,行,句子,段落。

你甚至可以加上 NSStringEnumerationLocalized 这个选项,这样可以在确定词语间和句子间的边界时把用户所在区域考虑进去。要遍历单个字符,可以将参数指定为 NSStringEnumerationByComposedCharacterSequences 按字符顺序,依次遍历出相关子字符串。

这里表明了苹果想让我们把字符串看做子字符串的集合,因为:
1单个 unichar 太小,不足以代表一个真正的 Unicode 字符。
2一些字符由多个 unicode 码点组成。

emoji 表情对应着一定的码元范围,因此可以通过的判断字符的 unicode 编码来判断改字符是否为 emoji 编码。

但这里有个问题,就是 emoji 对应的码元范围会随着系统版本的而改变,因为每次版本更新可能会添加新的 emoji 表情,因此这个判断方法,需要一直更新,那有没有一种好的方法可以长期有效判断呢。

在我们长期的印象中, emoji 表情都是带有色彩的,苹果键盘自带的 emoji 表情,从现在看来一直都是带有色彩的,而常规的文本一般都是黑色的,因此这里可以有如下解决方案:

具体实现如下:

当然这个方法只适合对少量的字符串,因为如果字符串比较长,利用该方法进行解析判断会耗费 CPU 资源。

因此我们可以结合上面的 emoji 对应的码元范围和下面是否包含颜色来判断,对应字符串是否包含 emoji 表情,这样准确性会高点,但对于一些第三方的键盘如搜狗输入法里面的一些表情,还是不能很好过滤。

如果是 swift 语言,因为 Swift 50 ,它带有一个新的 UnicodeScalarProperties 类,我们可以利用这个类的方法,向 Character 和 String 类添加一些帮助属性。这里会:

同样 swift 上的该方法对于第三方键盘上的部分表情判断也没办法做到百分百准确。

比如一段个人简介中经常是禁止输入表情,但允许输入中英文,如果中文要算 2 个字符,英文算 1 个字符,如何准确的算出,该字符串的长度。

因为这里的汉字算 2 个字节,英文算 1 个字节,因此应该使用 GB_18030_2000 编码来计算字符串的长度。

GB_18030_2000 主要有以下特点:

GB_18030_2000 编码:

我们常用的汉字是 3500 个,都包含在双字节部分,因此使用 GB_18030_2000 来计算字符串长度可以完美的解决我们的需求。

基于以上的知识,我写了一个输入框拦截器 FJFTextInputIntercepter ,该拦截器可以通过设置对应的参数来对输入框的输入进行限制:

这里我用了两种方式来写这个拦截器:

Unicode与JavaScript详解
从Emoji的限制到Unicode编码

JSP控制输入框内文字长度长度是根据maxlength属性的限定。
文本框有个maxlength的属性 可限制文本框内输入的字符长度
如:
<input type='text' name='id' maxlength='5' />
表示该文本框最多可输入5个字符

输入框的大小不知是指显示长度或最多能输入的字符数?如文本框可以这样控制:
<input name="textfield" type="text" size="12" maxlength="6" />
其中,size="12"是设置文本框的显示长度为12个字符,而maxlength="6"是限制最多能输入6个字符。
试试。

1、新建一个html文件,命名为testhtml。

2、在testhtml文件内,在p标签内,使用input标签创建一个数字输入框,用于数字的输入。

3、在testhtml文件内,设置input标签的id为num,主要用于下面通过该id获得input对象。

4、在testhtml文件内,使用button标签创建一个按钮,按钮名称为“验证输入内容”。

5、在testhtml文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行panduan()函数。

6、在js标签中,创建panduan()函数,在函数内,使用val()方法获得输入的内容,在if语句内,使用isNaN()方法判断输入的内容是不是数字,并且是否大于0,如果满足这两个条件,则提示“输入正确”,否则提示“请输入大于零的数字”。

TextBox控件本身有个maxlength属性,它可以限制TextBox中输入字符的最大长度,所以在只有字符输入的情况下,该属性可以很好的帮助我们达到限制输入长度的目的。
但如果输入包含中文或中英文混合的内容时,该属性就不那么完善了


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/yw/13399915.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存