ios软键盘遮挡输入框

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

  • 这个问题的回答你可以参考下: 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 });
    };