ios软键盘遮挡输入框

Question

ios软键盘遮挡固定在底部的输入框，有什么解决方案吗？用的vue写的h5嵌套在app里面。

Answer 1

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7435902
• 你也可以参考下这篇文章：vue项目H5项目中ios12系统兼容性问题，提供解决思路！
• 除此之外, 这篇博客: vue h5 上传图片角度旋转问题中的 场景还原： 手机上传人脸照片，但是发现图片是旋转了90度，这个奇葩的问题。解决方法如下。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
• • index.html 引入：

  
   <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
   
  

  <template>
    <div class="file dc">
      <input ref="upload" accept="image/*" capture="camera" type="file"
        id="upload" class="realfilebt" @change="getFile($event)" />
    </div>
  </template>
  
  <script>
  import { dataURLtoFile } from "src/assets/scripts/utils";
  import axios from "axios";
  const axiosInstance = axios.create({});
  export default {
    name: "selfphoto",
    props: {
    },
    data() {
      return {
        file: "",
        cUserId: this.$route.query.cUserId,
        fileType: null,
        filename: null
      };
    },
    mounted() {},
    methods: {
      async getFile(e) {
        let that = this;
        // console.info(44, e);
        let file = event.target.files[0];
        console.log("file", file);
        if (!file) {
          return;
        }
        that.fileType = file.type;
        that.filename = file.name;
  
        var reader = new FileReader();
        var imgUrl = null;
        var Orientation = null;
        reader.readAsDataURL(file);
        EXIF.getData(file, function() {
          Orientation = EXIF.getTag(this, "Orientation");
        });
  
        // alert("Orientation", Orientation);
  
        reader.onloadend = function(e) {
          var image = new Image(),
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d");
          image.src = e.target.result;
          imgUrl = e.target.result;
          image.onload = function() {
            var w = image.naturalWidth,
              h = image.naturalHeight;
  
            if (w > 1000) {
              h = (h * 1000) / w;
              w = 1000;
            }
  
            // 6、顺时针90   8、逆时针90   3、180度
            if (Orientation == 6) {
              canvas.width = h;
              canvas.height = w;
              ctx.rotate(Math.PI / 2);
              ctx.drawImage(
                image,
                0,
                0,
                image.naturalWidth,
                image.naturalHeight,
                0,
                -h,
                w,
                h
              );
            } else if (Orientation == 3) {
              canvas.width = w;
              canvas.height = h;
              ctx.rotate(Math.PI);
              ctx.drawImage(
                image,
                0,
                0,
                image.naturalWidth,
                image.naturalHeight,
                -w,
                -h,
                w,
                h
              );
            } else if (Orientation == 8) {
              canvas.width = h;
              canvas.height = w;
              ctx.rotate((3 * Math.PI) / 2);
              ctx.drawImage(
                image,
                0,
                0,
                image.naturalWidth,
                image.naturalHeight,
                -w,
                0,
                w,
                h
              );
            } else {
              canvas.width = w;
              canvas.height = h;
              ctx.drawImage(
                image,
                0,
                0,
                image.naturalWidth,
                image.naturalHeight,
                0,
                0,
                w,
                h
              );
            }
  
            var data = canvas.toDataURL(that.fileType, 1);
            let file = dataURLtoFile(data, that.filename);
            // console.info(333333, data, file);
            that.upload(file);
          };
        };
      },
  
      upload(file) {
        Indicator.open({
          text: "请稍等...",
          spinnerType: "snake"
        });
        var that = this;
  
        var data = new FormData();
        data.append("file", file);
        data.append("ossPathName", "QRImg"); // 文件后缀名
  
        axiosInstance({
          method: "POST",
          url: ` 修改成你的URL`,
          data: data
          // onUploadProgress: function(progressEvent) {
          //   var percentCompleted = Math.round(
          //     (progressEvent.loaded * 100) / progressEvent.total
          //   );
          //   //console.log(percentCompleted)
          //   //对应上传进度条
          //   self.progress = percentCompleted;
          // }
        })
          .then(async res => {
            console.log("res", res.data.Data.ossUrl);
          })
          .catch(function(err) {
            console.log("err", err);
          });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .file {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
  }
  .realfilebt {
    width: 100%;
    height: 100%;
    // background: red;
    opacity: 0;
  }
  </style>
  
  
  

  
  /**
   * @desc 将base64的图片转为文件流
   * @param {String} dataUrl base64数据
   * @return {Object} 文件流
   */
  export const dataURLtoFile = (dataUrl, filename) => {
      // const filename = `img${Date.now()}`;
      const arr = dataUrl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
  };