[TOC]

输入框自动聚焦

众所周知，input框自动聚焦加一个 autofocus 就行

  1. <input type="text" placeholder="XXX" autofocus>

如上图，IOS 完全不支持 autofocus 属性!!! 这个时候，就得咱们自己手动实现了

v-focus

  1. new Vue({
  2.     el: '#app',
  3.     directives: {
  4.         focus: {
  5.             inserted: function(el) {
  6.                 el.focus();
  7.             }
  8.         }
  9.     }
  10. })
  13. <input type="text" autofocus v-focus v-model="aaa">

ref

  1. <input type="text" autofocus ref="input" v-model="aaa">
  3. new Vue({
  4.     el: '#app',
  5.     data: {
  7.     },
  8.     mounted() {
  9.         this.$refs['input'].focus();
  10.         // this.$refs.input.focus();
  12.         // 如果是弹窗类的，记得用nextTick
  13.         this.$nextTick(() => {
  14.             if(this.$refs['input']) {
  15.                 this.$refs['input'].focus();
  16.             }
  17.         })
  18.     }
  19. });

输入框光标颜色

如上图，大部分情况都可以用css 的一个属性解决

  1. input {
  2.         caret-color: #333;
  3.     }
  4.     // 补充一下，去除input框默认样式大全
  5.     input {
  6.         width: 500px;
  7.         height: 72px;
  8.         border: none;
  9.         border-radius: 8px;
  10.         outline: none;
  11.         font-size: 28px;
  12.         background: rgba(240, 240, 240, 1);
  13.         caret-color: #333;
  14.     }

但是，IOS 11.3.0以前都不支持，所以，必须找到兼容性的办法，目前找到了几种，但是经过我的测试，依然不起效果。。。

  1. // 方法一
  2. .input {
  3.     color: red;
  4.     color\0: #333;
  5.     -webkit-text-fill-color: #333;
  6. }
  8. // 方法二
  10. input,textarea { 
  11.     color: rgb(60, 0, 248); /* 光标的颜色*/ 
  12.     text-shadow: 0px 0px 0px #D60B0B; /* 文本颜色 */ 
  13.     -webkit-text-fill-color: transparent; // 把文字原本的颜色变透明, 这样就显露出来了 text-shadow
  14. }

如果之后发现了新的办法，会补充更新 ;-)