js键盘事件实现微博减字功能

最新推荐文章于 2023-06-02 08:56:40 发布

小芒果cuty

最新推荐文章于 2023-06-02 08:56:40 发布

阅读量1k

点赞数 2

分类专栏： web前端基础文章标签： js

csdn@小芒果cuty

本文链接：https://blog.csdn.net/caipital/article/details/107228177

版权

web前端基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

需求：
使用 HTML 进行页面布局，当文本域内输上字且键盘按键被松开时，将在文本域右下角计算出还可以输入多少字，当显示出“还可以出入 0 个字符”时，文本域内不能再输入文本，本案例总共可输入 40 个字符。

<!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>
    <!-- 可供输入的文本域 -->
    <textarea name="" id="" cols="30" rows="10" style="outline: none;"></textarea>
    <!-- 用来显示剩余字数 -->
    <span></span>
    <script>
        // 获取html元素
        var textarea = document.querySelector("textarea");
        var span = document.querySelector("span");

        // 键盘按下文本域边框变色
        textarea.onkeydown = function () {
            textarea.style.border="1px solid rgb(8, 110, 226)";
        }
        // 键盘按键松开，动态显示剩余字数
        textarea.onkeyup = function () {
            var len = 40 - textarea.value.trim().length;
            if(len<0) {
                textarea.disabled=true;
                return;
            }
            span.innerText = "还可以输入"+len+"个字符";
        }
    </script>
</body>
</html>