JS 焦点文本区域

在 Web 开发中，焦点文本区域是指用户输入文本时光标所在的区域。JS 可以实现焦点文本区域的获取、设置以及监听等功能，为用户提供更好的交互体验。

获取焦点文本区域

要获取焦点文本区域，可以使用 document.activeElement 属性。这个属性表示当前文档中获得焦点的元素，如果该元素是表单输入控件（如 <input> 或 <textarea>），那么它就是焦点文本区域。

let input = document.querySelector('input[type=text]');
let textarea = document.querySelector('textarea');
let active = document.activeElement;

if (active === input) {
  console.log('焦点在输入框里');
} else if (active === textarea) {
  console.log('焦点在文本框里');
} else {
  console.log('焦点在其他地方');
}

设置焦点文本区域

要设置焦点文本区域，可以使用 focus() 方法。这个方法使元素获得焦点，光标出现在该元素内部的最后一个位置（如果是表单输入控件）。

let input = document.querySelector('input[type=text]');
let textarea = document.querySelector('textarea');

input.focus();
textarea.focus();

监听焦点事件

要监听焦点事件，可以使用 focus 和 blur 事件。focus 事件在元素获得焦点时触发，blur 事件在元素失去焦点时触发。

let input = document.querySelector('input[type=text]');
let textarea = document.querySelector('textarea');

input.addEventListener('focus', () => {
  console.log('输入框获得焦点');
});

textarea.addEventListener('blur', () => {
  console.log('文本框失去焦点');
});

总结

通过以上介绍，我们可以看到 JS 焦点文本区域的各种用途。获取焦点区域可以判断用户的操作，设置焦点区域可以自动聚焦到指定输入框，监听焦点事件可以触发相应的交互效果。掌握 JS 焦点文本区域的操作，可以让网页更加灵活、易用，提高用户的使用体验。