关于移动端输入框部分:
Q1:中文输入法,第一次输入1,结果是1,在输入a,结果11a,在输入b 结果为11a11ab
问题剖析:中文输入法状态下,在普通输入框中为置灰的状态,如图所示;
但是在此问题中却是直接输入,而显示的结果也是文本框中既有文本内容再加上输入法上面引号中的内容,于是怀疑是增加了oninput事件所致,删掉了oninput方法后,果然正常了,问题解决。
Q2:关于oninput事件限制文本长度失效问题。
问题描述:当用户推荐人选择康众员工选项时,填写的手机号长度为11位,此时oninput事件是可以限制成功的,然后选择服务商的时候不显示姓名及手机号,当再次选择康众员工时要求手机号不被清空。但是当用户操作到此步骤时发现手机号仍然可以编辑直至超出十一位。
原因剖析:oninput事件在第一次可以限制成功代表此方法本身是没有问题的,第二次没有起作用会不会是因为input 标签被重新渲染导致没有限制成功呢?于是看了下代码发现我用来控制显示和隐藏的部分是v-if,dom元素会被销毁并重建,改成v-show之后问题解决。
反思:之前喜欢用v-show,后来因为在dom元素创建的时候内容还没有被填充容易报错,就用上了v-if,所以之后好像习惯了v-if来控制显示/隐藏,总结起来就是你喜欢啥没用,文档说啥就是啥。