Javascript Focus 方法

2025年3月18日 | 阅读时长 4 分钟

focus 方法使用 html 字段，用户需要将焦点放在特定区域。它用于用户界面标签或输入标签。此 JavaScript 方法用于网页上的多个输入字段，并且用户不会遇到复杂问题。

语法

应用焦点到选择器使用以下语法。

说明

focus() 方法使用 html 页面的 queryselector。
我们可以将其用于网页的单个和多个输入文本。

示例

示例使用 focus 方法处理 html 标签的不同输入类型。我们可以使用任何用户交互式选择器或标签来使用 focus 事件。

示例 1

JavaScript focus() 方法使用带有 remove focus 标签的 input 标签。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<input type = "text" id = "myData" value = "A text field">
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "applyFocus()"> Apply focus </button>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
function applyFocus() {
  document.getElementById("myData").focus();
}
function removeFocus() {
  document.getElementById("myData").blur();
}
</script>
</body>
</html>

输出

给出的输出显示了 focus 方法的操作。

示例 2

JavaScript focus() 方法使用带有 remove focus 标签的 <a> 标签。该方法适用于链接或锚点标签的验证。

<!DOCTYPE html>
<html>
<style>
a:focus, a:active {
  color: red;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<a id = "myData" href="https://tpointtech.cn">Visit TpointTech.com</a>
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "applyFocus()"> Apply focus </button>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
function applyFocus() {
  document.getElementById("myData").focus();
}
function removeFocus() {
  document.getElementById("myData").blur();
}
</script>
</body>
</html>

输出

给出的输出显示了 focus 方法的操作。

示例 3

JavaScript focus() 方法使用带有 remove focus 标签的 input 标签。当窗口加载页面时，focus 会起作用，并触发事件。单击按钮后，focus 事件很容易被移除。

<!DOCTYPE html>
<html>
<style>
a:focus, a:active {
  color: red;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<a id = "myData" href="https://tpointtech.cn"> Visit TpointTech.com </a> <br><br>
<input type = "text" id = "myData1" value = "A text field">
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
window.onload = function() {
  document.getElementById("myData").focus();
}
function removeFocus() {
  document.getElementById("myData").blur();
}
</script>
</body>
</html>

输出

给出的输出显示了 focus 方法的操作。

示例 4

JavaScript focus() 方法使用带有 remove focus 标签的 <a> 标签。该方法适用于 textarea 验证，并通过 onclick 函数移除 focus 事件。

<!DOCTYPE html>
<html>
<style>
textarea:focus{
  color: red;
} 
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<textarea id = "myData1"></textarea>
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "applyFocus()"> Apply focus </button>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
function applyFocus() {
  document.getElementById("myData1").focus();
}
function removeFocus() {
  document.getElementById("myData1").blur();
}
</script>
</body>
</html>

输出

给出的输出显示了 focus 方法的操作。

示例 5

我们不能同时在所有标签上使用 focus 事件。示例展示了如何为各种用户交互式标签操作多个 focus 事件。

<!DOCTYPE html>
<html>
<style>
textarea:focus{
  color: red;
} 
input:focus{
  color: red;
} 
form{
border: 1px solid black;
padding: 5px;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<p> Click the buttons to apply or remove the focus method.</p>
<form>
  <label for = "uname">User Name:</label> <br>
  <input type = "text" id = "uname" name = "uname"><br>
  <label for = "cnt"> contact: </label> <br>
  <input type = "text" id = "cnt" name = "cnt"> <br>
   <label for = "cnt1"> Message: </label> <br>
  <textarea id = "myData1"></textarea> <br>
  <button type = "button" onclick = "applyFocus()"> Submit </button>
<button type = "button" onclick = "removeFocus()"> Clear </button>
</form>
<script>
function applyFocus() {
var vals1 = document.getElementById("uname").value;
var vals2 = document.getElementById("cnt").value;
var vals3 = document.getElementById("myData1").value;
  if(vals1 == ''){
  document.getElementById("uname").focus();
  }
  if(vals2 == ''){
  document.getElementById("cnt").focus();
  }
  if(vals3 == ''){
  document.getElementById("myData1").focus();
  }
}
function removeFocus() {
  document.getElementById("myData1").blur();
}
</script>
</body>
</html>

输出

给出的输出显示了 focus 方法的操作。

结论

focus 方法有助于使用 JavaScript 验证 html 的 input 标签。我们可以使用一个表单，提交数据并限制用户的数据。它使得用户友好且具有吸引力的网页，用于操作和维护数据。

下一主题JavaScript hashchange 事件

Javascript Focus 方法

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Javascript Focus 方法

语法

示例

结论

相关帖子

preventDefault() 和 stopPropagation() 方法之间的区别

Javascript regexp 前瞻

从 JavaScript IndexedDB 删除数据

将数据插入 JavaScript indexedDB

在 JavaScript 中按下和释放鼠标左键

如何使用 JavaScript 控制台

JavaScript 指数运算符

文本到粒子溶解效果 JavaScript 和 CSS

Npm uninstall 命令

JavaScript prepend() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程