如何让焦点始终固定在特定文本框

netScorpion 发布于2019-08-21 17:55 / 2489人阅读

摘要：一开始的时候，定义焦点在文本框，当文本框失去焦点的时候重新定焦在文本框。这样，就无法判断，焦点是否在文本框。于是我想到了用定时器来做，代码如下定时器每隔检查一次，当发现焦点不在文本框里，则定焦到最初的文本框，否则不改变焦点。

没耐心的朋友，可以直接看代码。

最近在做一个关于收银台的项目，其中有一个需求，是扫码枪扫描支付码进行支付。扫码枪触发的事件，其实是一个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检查一次，当发现焦点不在文本框里，则定焦到最初的文本框，否则不改变焦点。

用上面两种方法，基本上就可以满足所有固定焦点的情况了。

海外云主机私有云在js中怎么给文本框 js在表格里写文本框如何让项目在阿里云服务器上线 html 输入框焦点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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