微信小程序 - 开发总结(4): 文本框相关问题

说到小程序的文本框，那是真的坑啊，各种问题层出不穷，有种想骂娘的感觉。具体都有那些坑，下面列举一些常见问题【这些问题都是真机上出现的问题，模拟器上没有】并给出一定的解决方法，还有些到我们项目写完也没想到解决方案，也可能是我菜，大神可能有其他解决方法。

一、文本框输入 长度限制

　　文本框的输入长度限制是一个比较常规的需求，项目中几乎随处可见。从登陆页的手机号长度、图形验证码长度、手机验证码长度、密码长度 然后到 功能页面内身份证号码长度、以及其他需要限制输入长度的文本框，这些文本框，各种问题总结起来差不多又是两三个问题。

　　1、可见的内容长度和该内容的实际长度不一致

　　什么叫 可见的内容长度和该内容的实际长度不一致，意思是限制输入长度的文本框输入完成后，我们从页面上可看到的内容长度和该内容实际的数据长度不一致。比如图形验证码(限填4位)，在输入的时候不去数有几位了，埋头一个劲的输123456789abcd啥的，然后输完了，咋一看，没毛病，屏幕上显示的也是4位，然后把这个值提交到后端【其他参数都是正常的，假设后端限制的验证码长度也是4位】，这个时候就要报错“参数超长”，是不是很纳闷，我参数都是正常的，看着长度也是合法的，咋就超长了呢。

　　问题就出在这个限制长度上，我们看到的4位验证码，是这个文本框想让我们看到的，实际上这个验证码的真正值有5位，只是最后一位没显示出来，所以超长了，既然找到了原因，那解决方法就简单了，直接截取前4位即可。

　　解决方法：用 substring() 或者 slice() 直接截取需要的位数即可，如：

    name.substring(0, 15)  // 用户名限填15字

　　2、苹果手机 文本框输入汉字时，拼音也被计算长度，导致汉字无法输入到指定长度

　　文本框的输入长度限制，在苹果手机上除了上一个问题外，还有一个问题，即 输入汉字时，拼音也被计算长度，从而导致最后几个字无法输入，只能复制进去，问题原因下一个问题里有描述。

　　解决方法：①、既然是长度不够，那就把限制长度改大些或者直接不限制长度，同时在placeholder上提示限制输入的最大字数。如需求是限制15个字，那文本框输入限制就放长到25或者更长，这样可以保证最后输入的字数肯定比15个字多。然后在提交数据或文本框失去焦点时直接截取前15个字，或者提示用户限填15个字，让用户自行去删减。

　　　　　　　②、这个成本很大，用view自己写一个文本框，由于这个模拟的文本框不是一个真的文本框，所以无法调起手机本身的输入盘，只能自己另外写一个输入键盘。这种方式用在一些简单的文本框还是可以的，如手机号码、身份证号码、转账金额等的输入，这些文本框字符形式单一，可以通过样式排版和事件捕获来处理。但，真要是用来输入中文的话，我建议还是用第一种方法吧，除非自己实现拼音算法，否则没得玩。

　　3、苹果手机自带输入法输入汉字时，还未选中所需汉字，拼音就已写入文本框，并被计算了长度

　　这个问题实际上和上一个问题是同一个问题，相关联，只是表述不一样。上一个问题侧重无法输入，是果，而这个问题反而解释了上一个问题行成的原因，是因。因为苹果手机自带输入法 输入汉字时拼音先于所选汉字填充进文本框，并被计算了长度，从而导致拼不出所需的汉字，或者无法写入选中的汉字。至于这个问题形成的原因，就没去深究了(主要是项目上线后，无法发布测试小程序，又因为木得苹果手机，没法实测查找原因)。

　　解决方法：解决方法同上

二、页面整体布局position为fixed下(position: fixed) 文本框位置错位问题

三、页面整体布局position为fixed下(position: fixed) 文本框placeholder 定位问题

四、部分手机，不管是input文本框 或是 textarea文本框，点进去(获取焦点)后，placeholder提示语变黑加粗，但实际上这个文本框还是空白文本，并没有输入内容

五、苹果手机，textarea文本框(空白文本)获取焦点输入汉字，拼音也当成文本被键入文本框。但 placeholder提示依然存在且显示在上层

六、textarea文本框设置auto-height:true 同时自定义样式设置最小高度，点击获取焦点时，只有点击placeholder时才有效，其他地方无效。

这里 textarea文本框 虽然自定义样式设置了最小高度，但设置 auto-height:true 后自定义的最小高度失去作用，故而此时 textarea文本框 的高度只有 placeholder提示文本的高度，其他灰色区域看似是 textarea文本区域，但实际上并不是，故点击无效。

解决方法：二选其一

　　①、设置 auto-height:true 就不要再设置最小高度或固定高度。

<van-field
    value="{{test}}"
    type="textarea"
    maxlength="2000"
    show-confirm-bar="{{false}}"
    fixed="{{true}}"
    bind:change="bindTextChange"
    bind:focus="onFocusTextarea"
    bind:blur="onBlurTextarea"
    border="{{ false }}"
    autosize="true"　　// 设置 auto-height:true
/>

　　②、设置最小高度或固定高度，就不要设置 auto-height 属性

<van-field
  value="{{test}}"
  type="textarea"
  maxlength="2000"
  show-confirm-bar="{{false}}"
  fixed="{{true}}"
  bind:change="bindTextChange"
  bind:focus="onFocusTextarea"
  bind:blur="onBlurTextarea"
  border="{{ false }}"
/>

.text-area-w .van-field__control--textarea {
  height: 200rpx !important;
  padding: 0 !important;
}

最后多说一句，由于项目使用的是 Vant Weapp组件库，组件库的 Field 输入框 组件虽然提供了autosize 属性可以传入对象，在对象内设置最大和最小高度值，但实际使用效果并不理想，所以建议还是直接wxss样式设置高度或者设置autosize:true

七、华为手机 文本框先输入汉字，待汉字输入到文本框限定长度后，改输入字母或数字，字母和数字可以继续输入，并会逐个覆盖掉之前已输入好的汉字