1.解决ios第三方软键盘高度遮挡input框。

2018-07-06 本文已影响0人斯爱米诺子

（1）setTimeout(function(){           
    target.scrollIntoView(true);
},100);
（2）this.interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight;
}, 50 )

缺点：会有闪屏的情况存在。
之前用的插件，ios系统上输入内容input框会掉落在软键盘下面，所以自己手写的自动增长的textarea，代码如下：

image.png

image.png
思路：控制textarea的rows，然后给增长的e.taget.scrollHeight判断rows并给出相应的高度，问题在于textarea在删除每一行的字的时候，该（即前期已让它的高度增高的情况）e.target.scrollHeight是不变化的且会保持原来增长最高的高度height。
但是如果前期并不给该textarea高度让其增高的话，e.target.scrollheight是变化的，如论增高还是删掉文字，该scrollheight会随内容变化，因此，我用另一个textarea（A）模拟已有的textarea，首先textarea（A）的value绑定到原先的textarea上，在textarea上输入的内容会出现在textarea（A）上，因此便可以获取到textarea（A）的scrollHeight，通过该scrollHeight还控制删除字的时候的行高。
需要注意一点的是textarea（A）是只读的，readonly

2.移动端适配软键盘事件

在vue项目中，在有些安卓手机上会出现keypress()或者keyDown()事件无效果的情况，我此次遇到的是在华为手机上通过keypress()事件，监听不到软键盘上的空格键，因此就把键盘事件改成input事件里面有没有输入空格，如果输入空格就执行相应事件。

3.软键盘弹出，安卓手机内容会变小resize

解决方法：若是安卓系统，就把rem 改成px即可

4.解决图片，如果超出一定宽度，就让其为100%

image.png

5.tabindex="-1"的认识

如果在input标签里添加Tabindex=’-1’，点击键盘里面的tab键，是找不到该input标签的，tabindex也可以通过点击tab，进行顺序切换，有个问题是，添加tabindex=’-1’之后，移动端的软键盘里面出现的tab点击，Tabindex=’-1’不会起作用，但是在pc端是有用的。

6.对于码点在U+10000到U+10FFFF之间的字符

JavaScript 总是认为它们是两个字符（length属性为2）。所以处理的时候，必须把这一点考虑在内，也就是说，JavaScript 返回的字符串长度可能是不正确的。
base64转码
btoa()：任意值转为 Base64 编码
atob()：Base64 编码转为原来的值
var string = 'Hello World!';btoa(string) //"SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

7.伪元素的应用

<style>
    * {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
    }
  </style></head><body>
  <p class="spliter">分割线</p></body>

显示形式： —内容—