前端 - 關於開發時遇到的問題和解決方案;
工作不忙的時候,要學會總結。吃一塹長一智,道理如此;
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;"> 一個標題</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字串,逗號之後就是編碼過的圖像文件的內容。
})
前端 - 關於開發時遇到的問題和解決方案;