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

Posted s8656505

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端 - 关于开发时遇到的问题和解决方案;相关的知识,希望对你有一定的参考价值。

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

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

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

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

 <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字串,逗号之后就是编码过的图像文件的内容。
})

 








以上是关于前端 - 关于开发时遇到的问题和解决方案;的主要内容,如果未能解决你的问题,请参考以下文章

前端开发遇到的问题与怎么解决的

前端开发必备!Emmet使用手册

前端面试题之手写promise

关于片段生命周期

关于开发过程中遇到的一些问题总结

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发