模拟微博减字效果
实现思路
- HTML添加textarea标签(maxlength属性设置最大可输入字符数),用于接收用户输入
- HTML添加span标签,用于显示提示信息
- JS获取textarea文本域
- JS获取span标签
- 定义num变量,预设最大可输入字符数
- 给textarea文本域绑定聚焦事件,在文本域获取焦点时,判断文本域中字符数,并显示对应的提示信息
- 给textarea文本域绑定失焦事件,在文本域失去焦点时,隐藏提示信息
- 给文本域绑定文本域内容变化事件,判断文本域中字符数,如若小于预设最大可输入字符数,则显示还可以输入多少字符;否则显示总共可输入最大字符数。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博减字效果</title>
</head>
<body>
<!-- 文本域设置最大可输入字符数用于替代disabled增加用户体验 -->
<textarea name="" id="" cols="30" rows="10" maxlength="40"></textarea>
<span></span>
<script>
// 获取文本域
var oTextarea = document.querySelector('textarea');
// 验证文本域是否正常获取
// console.log(oTextarea);
// 获取提示文字显示框
var oSpan = document.querySelector('span');
// 验证提示框是否正常获取
// console.log(oSpan);
// 预先定义最大可输入字符数
var num = 40;
// 给文本域绑定聚焦事件
oTextarea.onfocus = function () {
// 如若文本域字符数为0,则显示还可输入最大字符数
if (this.value.length == 0) {
oSpan.innerHTML = '还可以输入' + num + '个字符'
// 如若文本域字符数为最大字符数,则显示还可输入0个字符
} else if (this.value.length == num) {
oSpan.innerHTML = '还可以输入0个字符'
// 否则,显示还剩余可输入字符数
} else {
oSpan.innerHTML = '还可以输入' + (num - this.value.length) + '个字符'
}
}
// 给文本域绑定失焦事件,隐藏提示信息
oTextarea.onblur = function () {
oSpan.innerHTML = '';
}
// 给文本域绑定文本域变化事件
oTextarea.oninput = function () {
// 如若文本域字符数小于最大可输入字符数,则显示还剩余可输入字符数
if (this.value.length < num) {
oSpan.innerHTML = '还可以输入' + (num - this.value.length) + '个字符';
// 如若文本域字符数大于等于最大可输入字符数,则显示总共可输入最大字符数
} else {
oSpan.innerHTML = '总共可输入' + num + '个字符';
}
}
</script>
</body>
</html>
示例图
- 图一:文本域聚焦及内容变化
- 图二:文本域失焦