前端 - 关于开发时遇到的问题和解决方案；

Posted 2020-12-03 s8656505

工作不忙的时候，要学会总结。吃一堑长一智，道理如此；

1.关于移动端，页面宽度超出屏幕宽度的问题；

布局时候不注意，对元素宽度设置100%，再设置padding或者margin就会出现这个问题；

解决方案就是去掉margin和padding，再low点，取消padding改用&nbsp；来怼；其实还是要根据页面实际情况再加样式；

 <h3 style="width: 100%;height: 3rem;line-height: 3rem;background-color: #f5f4f9;color:#999;font-weight: normal;">&nbsp;&nbsp;&nbsp;一个标题</h3>//这是body里面的一个标题;

2.工作中遇到如下需求，点击输入框弹出自定义弹窗，输入框是input标签；

但是在移动端，input会默认触发手机的虚拟键盘，如何阻止手机虚拟键盘弹起呢？

目前我试过有两个方案，一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句document.activeElement.blur() 。

使用readonly方式来阻止虚拟键盘弹出应该是最简单最优雅的方式了。readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

值得一提的是它的取值，只要声明了readonly属性，不管取什么值都可以，比如readonly=””、readonly=”readonly”、readonly=”abc”都是一样的

优点：简单
缺点：在ios的Safari中无效（未做更多情况测试）

document.activeElement是一个Web API接口。MDN上的解释是：它返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件，该属性是只读的。

document.activeElement属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载。

它里面有很多方法，在浏览器控制台查看，可以看到有很都方法；

那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢？原因是：当你点击input的时候，document.activeElement获得了DOM中被聚焦的元素，也就是你点击的input，而调用.blur()方法，blur我相信大家都知道吧，就是取消聚焦。获得被聚焦的元素然后强制blur以达到没有聚焦的样子、、、感觉绕了。

优点：支持android、iOS
缺点：需要添加额外的JS代码

<div class="calendar">
    <div>
        <input type="text" id="datePicker" class="date_picker" placeholder="点击选择入住日期">
    </div>
</div>
//js代码
$("#datePicker").focus(function(){
    document.activeElement.blur();
});

3.关于文件上传到服务器问题；

function upload(e){//使用input标签type=file，在onchange事件中调用此函数；

   var csrf = e.target.files;//file里面存放有文件的名字(name)、格式(type)、大小(size)、上传时间(time)等等　　

　　var formData = new FormData();//创建一个FormData，存放要上传的文件信息；这个formData对象对外不可见，打印出来也只是一个function；

　　formData.append("csrfmiddlewaretoken", csrf);/*获取上传的文件对象*/　　

　　$.ajax({

　　　　url: fileUrl,

　　　　type: "POST",

　　　　processData: false,//(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

　　　　contentType: false,//(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）

　　　　dataType: ‘JSON‘,

　　　　cache: false,

　　　　data: formData,//XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过javascript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

　　　　success: function (res) {}

　　　　//回调函数

　　}）

　　

如果上传的文件是图片，可以在当前页面设置图片预览；

$("#avatarSlect").change(function () {
      var obj = $("#avatarSlect")[0].files[0];//获取文件信息；
      var fr = new FileReader();//window内部有一个FileReader的构造函数；
      fr.onload = function () {
          $("#avatarPreview").attr(‘src‘, this.result);
             console.log(this.result);
             $("#avatar").val(this.result);
           };
         fr.readAsDataURL(obj);
　　　　　　//FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。
　　　　　　//Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。
　　　　　　//使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；
　　　　　　//readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。
    })