实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

时间：2021-12-26 14:59:05

前言：

对于实时监听输入，这种需求大多数都是用于一个联想字提醒，智能提醒。大家都知道onkeydown，onkeypress，onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端，不是那么完美。

Demo：

Html5提供了一个标准事件oninput和IE的专属事件onpropertychange事件来监听输入值的变化。

<html>

<head>

    <title>搜索</title>

</head>

<body>

<input type="text" id="search_input">

<span id="inputorp_s"></span>

<script src="./jquery.js"></script>

<script>

    $(function () {

        //判断浏览器是IE?

        if (navigator.userAgent.indexOf("MSIE") != -1) {

            $('#search_input').bind('propertychange', getSmartTips);

        } else {

            $('#search_input').bind('input', getSmartTips);

        }

    });

    function getSmartTips() {

        $('#inputorp_s').text($(this).val());

        //todo:用ajax去后台拿智能联想数据

    }

</script>

</body>

</html>

相关文章