我在前端开发中常常用到 JavaScript 来实现一些交互效果 |21xrx.com

我在前端开发中常常用到 JavaScript 来实现一些交互效果

2023-06-17 05:46:15 深夜i -- --

我在前端开发中常常用到 JavaScript 来实现一些交互效果。其中，输入框的效果是非常常见的一个。接下来，我将分享一些 JavaScript 实现输入框效果的方法。

1. 实现输入框焦点效果

输入框在获取焦点时，一般会有一个边框或阴影效果来提示用户。下面是实现这个效果的 JavaScript 代码：


const input = document.querySelector('#myInput');
input.addEventListener('focus', () =>
 input.style.border = '2px solid blue';
);
input.addEventListener('blur', () =>
 input.style.border = '';
);

这段代码使用了事件监听器，在输入框获得和失去焦点时，分别给输入框添加或删除边框样式。

2. 检查输入框内容格式

有时候需要检查输入框的内容格式是否符合要求，比如邮箱、电话号码等格式的检查。下面是一个简单的电话号码格式检查代码：


const input = document.querySelector('#phoneInput');
input.addEventListener('blur', () => {
 const value = input.value;
 if (!/^1[3-9]\d{9}$/.test(value)) {
  alert('请输入正确的电话号码！');
  input.value = '';
 }
});

这段代码使用了正则表达式来检查电话号码是否符合规则。如果不符合，则弹出提示框，并将输入框的值清空。

3. 实现预填充和自动补全功能

有时候需要在输入框中实现预填充或自动补全的功能，可以使用如下 JavaScript 代码：


const input = document.querySelector('#myInput');
const dataList = document.querySelector('#myList');
const data = ['apple', 'banana', 'cherry', 'durian', 'elderberry'];
input.addEventListener('input', () => {
 dataList.innerHTML = ''; //清空数据列表
 const value = input.value.toLowerCase();
 const matches = data.filter(item => item.toLowerCase().startsWith(value));
 matches.forEach(match => {
  const option = document.createElement('option');
  option.value = match;
  dataList.appendChild(option);
 });
});

这段代码使用了 `` 标签，并结合事件监听器实现了自动补全的功能。当用户在输入框中输入内容时，将输入值和预设的数据进行匹配，并将匹配到的数据添加到 `` 标签中。

标题：三种 JavaScript 实现输入框效果的方法

上一篇: idea打包java可执行jar包

下一篇: JavaScript编程实例：学习JavaScript的最佳方式

评论区

()

相似文章