iOS中UITextField的字数限制 emoji被截断问题

最新推荐文章于 2021-08-26 18:18:04 发布

st646889325

最新推荐文章于 2021-08-26 18:18:04 发布

阅读量2.3k

点赞数

分类专栏：文本输入（TextField ）文章标签： iOS UITextField字数限制

文本输入（TextField ）专栏收录该内容

25 篇文章

订阅专栏

在开发中, 有些时候会碰到这样的需求: 希望输入框有最大字数限制. 比如, 用户昵称长度限制, 评论最大字数限制.

刚开始的时候, 采用的是`shouldChangeCharactersInRange`

http://stackoverflow.com/questions/433337/set-the-maximum-character-length-of-a-uitextfield

这样在输入全部是英文的情况下是可以的. 但是当输入是中文时, 由于shouldChangeCharactersInRange判断的是当前键盘的字符数, 会出现这样的问题: 比如你还剩下2个字可以打, 你想输入"张三", "张"的拼音是Zhang, 于是你在输入Zh的时候就无法输入了. 显然, 这样的结果不是我们想要的.

而且, shouldChangeCharactersInRange也没有响应最后拼音到汉字的过程.

然后在这里找到了基本可行的解决方案:

http://blog.sina.com.cn/s/blog_60f977e70101g4gj.html#cmt_3529521

在viewDidLoad中注册<UITextFieldTextDidChangeNotification>通知.

<code class="css"><span class="hljs-attr_selector" style="color: rgb(0, 136, 0);">[[NSNotificationCenter defaultCenter]</span><span class="hljs-rule"><span class="hljs-attribute">addObserver</span>:<span class="hljs-value">self selector:@<span class="hljs-function" style="color: rgb(0, 102, 102);">selector</span>(textFiledEditChanged:) 
          name:@<span class="hljs-string" style="color: rgb(0, 136, 0);">"UITextFieldTextDidChangeNotification"</span> object:myTextField]</span></span>;</code>

然后实现监听方法:

<code class="objectivec">-(<span class="hljs-keyword" style="color: rgb(0, 0, 136);">void</span>)textFiledEditChanged:(<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSNotification</span> *)obj{   
   <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextField</span> *textField = (<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextField</span> *)obj<span class="hljs-variable" style="color: rgb(102, 0, 102);">.object</span>;     
   <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSString</span> *toBeString = textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span>;  
   <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSString</span> *lang = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextInputMode</span> currentInputMode] primaryLanguage]; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 键盘输入模式  </span>
   <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> ([lang isEqualToString:<span class="hljs-string" style="color: rgb(0, 136, 0);">@"zh-Hans"</span>]) { <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 简体中文输入，包括简体拼音，健体五笔，简体手写       </span>
      <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextRange</span> *selectedRange = [textField markedTextRange];       <span class="hljs-comment" style="color: rgb(136, 0, 0);">//获取高亮部分      </span>
      <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextPosition</span> *position = [textFieldpositionFromPosition:selectedRange<span class="hljs-variable" style="color: rgb(102, 0, 102);">.start</span> offset:<span class="hljs-number" style="color: rgb(0, 102, 102);">0</span>];       
      <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 没有高亮选择的字，则对已输入的文字进行字数统计和限制       </span>
      <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (!position) {
           <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (toBeString<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> > kMaxLength) {
               textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringToIndex:kMaxLength];
           }
       }       <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 有高亮选择的字符串，则暂不对文字进行统计和限制</span>
       <span class="hljs-keyword" style="color: rgb(0, 0, 136);">else</span>{                
        }   
      }   <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 中文输入法以外的直接对其统计限制即可，不考虑其他语种情况   else{</span>
       <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (toBeString<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> > kMaxLength) {
           textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringToIndex:kMaxLength];
       }
   }}</code>

一切看起来, 似乎还不错. 通过截取字符来达到目的.然后导师告诉我, 碰到emoji就挂了. 假设限制输入15个字符, 第十五个字符如果输入是emoji, 则emoji不能正常显示. 因为emoji是两个字符大小.

于是, 在这里找到防止这种粗暴截断方法的思路.

http://stackoverflow.com/questions/15775294/truncate-string-containing-emoji-or-unicode-characters-at-word-or-character-boun

使用rangeOfComposedCharacterSequencesForRange, 防止在range范围内整词被截断.
但是iOS貌似不能正确识别中文的composed character sequences , 只要是两个中文字都会被识别成composed character sequences. 恰好, 输入emoji时currentInputMode也不是zh-Hans. 因此, 在判断当前输入Mode是中文时, 可以继续使用substringToIndex, 进行截断. 在非中文Mode时, 加以判断.
代码如下:

<code class="objectivec"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68);">#pragma mark - Notification Method</span>
-(<span class="hljs-keyword" style="color: rgb(0, 0, 136);">void</span>)textFieldEditChanged:(<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSNotification</span> *)obj
{
    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextField</span> *textField = (<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextField</span> *)obj<span class="hljs-variable" style="color: rgb(102, 0, 102);">.object</span>;
    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSString</span> *toBeString = textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span>;
    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSString</span> *lang = [textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.textInputMode</span> primaryLanguage];
    <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> ([lang isEqualToString:<span class="hljs-string" style="color: rgb(0, 136, 0);">@"zh-Hans"</span>])<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 简体中文输入</span>
    {
        <span class="hljs-comment" style="color: rgb(136, 0, 0);">//获取高亮部分</span>
        <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextRange</span> *selectedRange = [textField markedTextRange];
        <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextPosition</span> *position = [textField positionFromPosition:selectedRange<span class="hljs-variable" style="color: rgb(102, 0, 102);">.start</span> offset:<span class="hljs-number" style="color: rgb(0, 102, 102);">0</span>];

        <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 没有高亮选择的字，则对已输入的文字进行字数统计和限制</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (!position)
        {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (toBeString<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> > MAX_STARWORDS_LENGTH)
            {
                textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringToIndex:MAX_STARWORDS_LENGTH];
            }
        }

    }
    <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 中文输入法以外的直接对其统计限制即可，不考虑其他语种情况</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136);">else</span>
    {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (toBeString<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> > MAX_STARWORDS_LENGTH)
        {
            <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSRange</span> rangeIndex = [toBeString rangeOfComposedCharacterSequenceAtIndex:MAX_STARWORDS_LENGTH];
            <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (rangeIndex<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> == <span class="hljs-number" style="color: rgb(0, 102, 102);">1</span>)
            {
                textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringToIndex:MAX_STARWORDS_LENGTH];
            }
            <span class="hljs-keyword" style="color: rgb(0, 0, 136);">else</span>
            {
                <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSRange</span> rangeRange = [toBeString rangeOfComposedCharacterSequencesForRange:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSMakeRange</span>(<span class="hljs-number" style="color: rgb(0, 102, 102);">0</span>, MAX_STARWORDS_LENGTH)];
                textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringWithRange:rangeRange];
            }
        }
    }
}</code>

看了一下微信,QQ,知乎的修改昵称.
微信是将英文字符算一个长度, 中文算两个长度,emoji算四个长度总长度是32. 当你在输入中文字符超过规定长度时, 则强制将当前的键盘输入变成英文. 如果剩下的字符数小于等于3, 则不可以输入emoji.
QQ也是将英文字符和中文分开计算长度, 但是当只剩下一个长度时, 键盘无法输入完整的汉语拼音. 即上面讲的<张三>的例子.
不过在修改昵称这里长度设长一些无所谓. 如果是一些需要写评论的地方则还是有体验优化的余地.
知乎二货居然没有长度限制, 不过修改昵称居然要审核...

10月14日更新
后来发现第三方输入法(如搜狗,百度输入法)会出现错误, 发现只需要这样就行了.

<code class="objectivec">    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextField</span> *textField = (<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextField</span> *)obj<span class="hljs-variable" style="color: rgb(102, 0, 102);">.object</span>;
    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSString</span> *toBeString = textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span>;

    <span class="hljs-comment" style="color: rgb(136, 0, 0);">//获取高亮部分</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextRange</span> *selectedRange = [textField markedTextRange];
    <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UITextPosition</span> *position = [textField positionFromPosition:selectedRange<span class="hljs-variable" style="color: rgb(102, 0, 102);">.start</span> offset:<span class="hljs-number" style="color: rgb(0, 102, 102);">0</span>];

    <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 没有高亮选择的字，则对已输入的文字进行字数统计和限制</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (!position)
    {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (toBeString<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> > MAX_STARWORDS_LENGTH)
        {
            <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSRange</span> rangeIndex = [toBeString rangeOfComposedCharacterSequenceAtIndex:MAX_STARWORDS_LENGTH];
            <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (rangeIndex<span class="hljs-variable" style="color: rgb(102, 0, 102);">.length</span> == <span class="hljs-number" style="color: rgb(0, 102, 102);">1</span>)
            {
                textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringToIndex:MAX_STARWORDS_LENGTH];
            }
            <span class="hljs-keyword" style="color: rgb(0, 0, 136);">else</span>
            {
                <span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSRange</span> rangeRange = [toBeString rangeOfComposedCharacterSequencesForRange:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSMakeRange</span>(<span class="hljs-number" style="color: rgb(0, 102, 102);">0</span>, MAX_STARWORDS_LENGTH)];
                textField<span class="hljs-variable" style="color: rgb(102, 0, 102);">.text</span> = [toBeString substringWithRange:rangeRange];
            }
        }
    }</code>