好久没有更新了，不知道写什么，昨天遇到个关于
input的问题比较有意思，今天来整理一下
需求一： 控制 placeholder 样式
placeholder 的样式控制算是比较让人头疼的问题，尤其是要兼容老客户端的时候尤为突出
idea_1: div 模拟 input
受制于兼容起点，外包团队的企业站种通常会用这种方法 优势： 通过div模拟出input的功能和样式，比较灵活。 劣势： 弊端就是需要写js去模拟input的状态，当业务复杂或者绑定的东西比较多的时候，会比较混乱
idea_2: input 生成伪元素定位覆盖
在 css 中生成 input 的 ::before/::after 覆盖在 input 之上，通过监听input/onchange 事件判断 input 的 value 是否为空来模拟 placeholder
优势： 简单，html 中只写 input 就可以。
劣势： 存在兼容问题，我们知道伪元素 ::before/::after 必须存在于闭合标签下才有效。测试中只有 FF 浏览器会在使用伪元素后自动补全闭合标签，而手动补齐单标签的闭合标签在其他现代浏览器中普遍是不生效的。所以如果想实现这种方法就要退而求其次，自己在外层包裹一层父元素来承载伪元素。
idea_3: ::placeholder CSS伪元素
::placeholder 在输入字段中表示占位符文本，由于伪元素普遍存在兼容问题，所以内核前缀是逃不掉的
看代码：
::-webkit-input-placeholder { /* WebKit browsers for Chrome/Safari/Opera */
color:#000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#000;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#000;
}
:-ms-input-placeholder { /* for Internet Explorer 10+ */
color:#000;
}
或者是这样：
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color:#666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color:#666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color:#666;
}
具体的兼容情况可以参考 caniuse.com
需求二：干掉ios的光标
没有显示 Dialog 的时候还好，点击选择地区的 Dialog 组件显示以后，获得焦点的 input 的光标会一直置于显示的顶层。
idea_1: 设置 Dialog 的 z-index
起初以为是 z-index 的问题，但设置后并不生效。而且只是 ios 会出现这个问题。
idea_2: 设置 readonly 和 disable
设置 readonly 以后能保证光标不会出现了，通过绑定 click 事件触发需要执行的方法，光标是不见了，可是到 ios 测试的时候，依然不生效 = =..
再设置 disable，光标是不见了，但是直接阻断了 click 事件的触发，依然pass..
idea_3: 在网络上扒到一个脏套路
input: {
color: transparent;
text-shadow: 0,0,0,#000;
}
呃,这么玩儿还是头一回见 [捂脸.gif]。
这么一来，就相当于直接把文本干掉了，光标就不存在了，文字用字体阴影来代替。好像没什么问题，满怀信心的去测试。
结果… … [捂脸.gif]x2
好顽强的 ios 光标，嘲讽的闪呀闪。
idea_4: focus=blur
去年做微信模拟支付键盘的时候，遇到过这个问题，由于是绑定赋值，而不是通过键盘直接输入值，所以实现起来应该是差不多的。
<input type="text" onfocus="this.blur()">
或者在 Vue 中这样写
<input type="text" @focus="$event.target.blur()">
再去 ios 测，搞定！