监听文本框输入开发仿新浪微博限制输入字数的textarea插件

最新推荐文章于 2022-11-14 13:39:17 发布

loop.fu

最新推荐文章于 2022-11-14 13:39:17 发布

阅读量363

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_21683643/article/details/80271381

版权

监听文本框输入 Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。 oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。 onpropertychange 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）（仅 IE 支持）。 backspace、delete 两个按键的 keyCode 分别为 8、46。 oncut 事件在粘贴（ctrl + v）、鼠标粘贴时触发。

var input = document.getElementById("test");
    function fn() {
   
        console.log(input.value.length) // 你要执行的代码
    }

    if (window.addEventListener) { //先执行W3C
        input.addEventListener("input", fn, false);
    } else {
        input.attachEvent("onpropertychange", fn);
    }
    if (window.VBArray && window.addEventListener) { //IE9
        input.attachEvent("onkeydown", function() {
   
            var key = window.event.keyCode;
            (key == 8 || key == 46) && fn(); //处理回退与删除
        });
        input.attachEvent("oncut", fn); //处理粘贴
    }

在上面的代码中，可以看到，在JS中有oninput这样的事件，文本框的输入、退格、空格、粘贴等操作均能触发，利用这个事件就可以动态捕捉用户的输入情况。记得以前做动态监测输入，都是用onkeydown或onkeyup，太土了，现在直接用这个吧。当代IE的兼容问题已经在上面的代码中解决了，那么我们之接就可以拿来使用了；利用oninput事件，我们可以开发一款限制textarea字数的插件，像新浪微薄发表微薄的时候，就有字数的限制；开发这个插件其实相当简单，就是对输入的字数进行一下统计，如果超出了就进行提示，直接看代码：

<!DOCTYPE html>
<html>
<head>

最低0.47元/天解锁文章

loop.fu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
监听文本框输入开发仿新浪微博限制输入字数的textarea插件

监听文本框输入Firefox、Chrome、IE9，IE10 均支持 oninput 事件，此外所有版本的 IE 均支持 onpropertychange 事件。oninput 事件在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时触发（在 IE9 中只在输入、粘贴、鼠标粘贴时触发）。onpropertych...
复制链接

扫一扫