最近項目有個需求，我們使用的是PDA裝置，它有掃描槍，可以讓掃描出來的內(nèi)容填寫到html的input控件中。
成都創(chuàng)新互聯(lián)長期為1000多家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南縣企業(yè)提供專業(yè)的成都網(wǎng)站建設、成都網(wǎng)站制作，南縣網(wǎng)站改版等技術服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
但是有一個棘手問題，就是input控件只要獲取焦點，就會彈出鍵盤。
項目的需求，希望剛開始時，只是將焦點聚集在input控件上，可以通過掃描槍輸入，然后點擊input控件時，還能彈出鍵盤進行修改。
這個問題解決核心就是 input控件聚焦的時候，不彈出鍵盤，當點擊的時候，才彈出鍵盤。
嘗試了很多方法，最后發(fā)現(xiàn)了readOnly屬性一個詭異作用。當調(diào)用 input控件的focus()方法時，如果readOnly屬性為true，那么不會彈出鍵盤，但是焦點已經(jīng)在 input控件上了。這個時候，再將readOnly屬性設置為false，那么這個時候鍵盤不會彈出，但是可以掃描槍輸入了。
示例:
移動web聊天頁面，輸入框在底部的時候，點擊輸入，彈起軟鍵盤，iOS在將頁面推上的時候會回彈一下，導致鍵盤剛好遮擋到輸入框。
初次觸發(fā)輸入框的focus的時候，iOS 鍵盤默認是以英文鍵盤高度推上頁面，但一般我們的默認輸入是中文，會導致軟鍵盤的高度變化，中文輸入鍵盤高度高于英文，所以導致了遮擋。
Element.scrollIntoViewIfNeeded() 方法用來將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動到瀏覽器窗口的可見區(qū)域。 如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會發(fā)生滾動。 此方法是標準的 Element.scrollIntoView() 方法的專有變體。
當鍵盤在切換中英輸入法時，鍵盤高度變化仍然會引起鍵盤遮擋
監(jiān)聽輸入框的 focus 、 blur 事件，當聚焦時，循環(huán)調(diào)用 input.scrollIntoViewIfNeeded 方法。
當監(jiān)聽到 blur 時，停止循環(huán)。
解決方法
1、scrollIntoView(alignWithTop):?滾動瀏覽器窗口或容器元素，以便在當前視窗的可見范圍看見當前元素。
2、alignWithTop?若為?true，或者什么都不傳，那么窗口滾動之后會讓調(diào)用元素的頂部與視口頂部盡可能平齊。
3、alignWithTop?若為?false，調(diào)用元素會盡可能全部出現(xiàn)在視口中，可能的話，調(diào)用元素的底部會與視口頂部平齊，不過頂部不一定平齊。
4、該方法是唯一一個所有瀏覽器都支持的方法，類似還有如下方法，但是只有在Chrome和Safari有效。
5、代碼如下：
6、再次測試，效果如下：
7、相比于input被擋住，突兀地出現(xiàn)在頁面中間更加可以令人接受，但是多次測試，仍然存在問題：當切換輸入法的時候，input框的位置會往下移動，被鍵盤擋住一部分，而且出現(xiàn)的概率比較高（中英文切換），效果如下：
8、當軟鍵盤被喚起是，使用?scrollTop()?方法使input元素滾動到指定的位置，但是滾動的具體數(shù)值需要調(diào)試才能給出，所以這里就不再演示了。
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
瀏覽器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
被拖元素，dragElement :
(1)添加事件：ondragstart
(2)添加屬性：dragable
放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會用例子來說明。
2、頁面上元素間的拖放
下面用個小例子，div間的拖放來展示，各個事件如何被觸發(fā)：
系統(tǒng)中選擇的一個或多個文件拖入該div中，files中會存儲拖入文件的信息，然后我們通過file可以得到文件的類型，長度，內(nèi)容然后實現(xiàn)上傳。
3、setDragImage(image, x, y)用于設置鼠標移動過程中隨鼠標一起移動的效果圖。必須在dragstart中設置。
4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖拽過程中鼠標顯示的樣式，不過通?？梢院雎赃@幾個屬性，一般用不到。
顯示搜索按鈕需要滿足3個條件：
1.input在form標簽中
2.form標簽設置了action屬性值
3.input設置type為search
示例如下：
form action="#"
input type="search" /
/form
這種情況下點擊搜索按鈕會跳轉(zhuǎn)到action對應的地址進行搜索
如果我們需要js來處理搜索邏輯，可以設置form不提交，并且監(jiān)聽輸入框的keydown事件
示例如下：
form action="#" onsubmit="return false"
input type="search" id="t_search" /
/form
script type="text/javascript"
$("#txt_search").keydown(function (e) {
if (e.keyCode == 13) {
//搜索處理
}
});
/script
還有一個前往按鈕，也類似，把type換成text就可以了，所以form很重要，如果我們不放form，就是“換行”按鈕了。
end
重慶分公司
重慶分公司
