实时监听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>