如何讓焦點始終固定在特定文本框

netScorpion 發布于2019-08-21 17:55 / 2611人閱讀

摘要：一開始的時候，定義焦點在文本框，當文本框失去焦點的時候重新定焦在文本框。這樣，就無法判斷，焦點是否在文本框。于是我想到了用定時器來做，代碼如下定時器每隔檢查一次，當發現焦點不在文本框里，則定焦到最初的文本框，否則不改變焦點。

沒耐心的朋友，可以直接看代碼。

最近在做一個關于收銀臺的項目，其中有一個需求，是掃碼槍掃描支付碼進行支付。掃碼槍觸發的事件，其實是一個keyup enter事件，要捕獲到這個事件，必須將焦點定在支付碼輸入框內才可以。

inputEle=document.getElementById("focusInput");

inputEle.focus();

inputEle.onblur=function(){
  inputEle.focus();
};

一開始的時候，定義焦點在文本框，當文本框失去焦點的時候重新定焦在文本框。很簡單的方法，就實現了固定焦點的要求。

后來這個頁面上又多了搜索框和商品列表，那么，當焦點在其他文本框的時候，如何判斷使其能正常輸入呢？

起初，我還是按上面方法去做，卻發現，鼠標無論如何點擊，document.activeElement(當前焦點坐在元素)始終是body元素。這樣，就無法判斷，焦點是否在文本框。于是我想到了用定時器來做，代碼如下：

var focus=function(){
  setTimeout(function(){
    let activeElement=document.activeElement;
    if(activeElement.type!=="text"){
      inputEle.focus();
    }
    focus();
  },60);
}

focus();

定時器每隔60ms檢查一次，當發現焦點不在文本框里，則定焦到最初的文本框，否則不改變焦點。

用上面兩種方法，基本上就可以滿足所有固定焦點的情況了。

云服務器 GPU云服務器在js中怎么給文本框 js在表格里寫文本框如何讓項目在阿里云服務器上線 html 輸入框焦點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90216.html

JS學習筆記（第14章）（表單腳本）

摘要：布爾值，表示當前字段是否被禁用。指向當前字段所屬表單的指針只讀。文本框腳本在中，有兩種方式來表現文本框一種是使用元素的單行文本框，另一種是使用的多行文本框。然后，我們把這個函數指定為每個文本框的事件處理程序。本章知識架構 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...

BlackHole1 2019-08-26 10:23 評論0 收藏0
javascript高級程序設計（第三版）學習摘錄下

摘要：方法接受一個布爾值參數，表示是否執行深復制方法不會復制添加到節點中的屬性，例如事件處理程序等。由于跨域安全限制，來自不同子域的頁面無法通過通信。這三個集合都是動態的換句話說，每當文檔結構發生變化時，它們都會得到更新。第十章 DOM 1001、每一段標記都可以通過樹中的一個節點來表示：HTML 元素通過元素節點表示，特性（attribute）通過特性節點表示，文檔類型通過文檔類型節點...

yiliang 2019-08-26 11:52 評論0 收藏0
前端硬核面試專題之 HTML 24 問

摘要：前言本文講解前端面試的的內容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累注意文章的題與題之間用下劃線分隔開，答案僅供參考。返回當前文檔的標題。改用則可以進行針對性的和避免不必要的。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 1. 前言本文講解前端面試的 HTML 的內容。復習前端面...

honhon 2019-08-26 10:37 評論0 收藏0
高程3總結#第14章表單腳本

表單腳本表單的基礎知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset，服務器能夠處理的字符集，等價于HTML中的accept-charset特性 action，接受請求的URL，等價于HTML中的action特性 elements，表單中所有控件的集合 enctype，請求的編碼類型，等價于HTML中的enctype特性 length，表單中控件的數量 m...

Tony 2019-08-23 12:04 評論0 收藏0
可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0