您的位置：首页 > Web前端 > JavaScript

js实时监听文本框内文本的变化

2016-01-12 11:13 447 查看

请在这里查看示例 ☞ remainWord示例

具体说明请看上面示例，兼容性>=ie8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.ctn {
border: 1px solid #bfbfbf;
padding: 10px;
margin-bottom: 10px;
}
.bold {
background: #fdd6d6;
}
</style>
</head>
<body>
<div class="ctn">
<div>方法1：使用<span class="bold">input</span>和<span class="bold">propertychange</span>监听文本内容变化</div>
<input class="a" />
<div>
<span>输入内容：</span>
<span class="show"></span>
</div>
<div>问题：ie9删除内容时不会触发</div>
</div>
<div class="ctn">
<div>方法2：使用<span class="bold">change</span>监听文本内容变化</div>
<input class="b" />
<div>
<span>输入内容：</span>
<span class="show"></span>
</div>
<div>问题：键盘输入时不会触发</div>
</div>
<div class="ctn">
<div>方法3：使用<span class="bold">keydown</span>监听文本内容变化</div>
<input class="c" />
<div>
<span>输入内容：</span>
<span class="show"></span>
</div>
<div>问题：永远获取不到最后输入的最后一个字符</div>
<div>问题：把文本拖进来时不会触发</div>
</div>
<div class="ctn">
<div>方法4：使用<span class="bold">keydown</span>和<span class="bold">setTimeout</span>监听文本内容变化</div>
<input class="d" />
<div>
<span>输入内容：</span>
<span class="show"></span>
</div>
<div>问题：把文本拖进来时不会触发</div>
</div>
<div class="ctn">
<div>方法5：使用<span class="bold">input</span>、<span class="bold">propertychange</span>、<span class="bold">change</span>、<span class="bold">keydown</span>和<span class="bold">setTimeout</span>监听文本内容变化</div>
<input class="e" />
<div>
<span>输入内容：</span>
<span class="show"></span>
</div>
<div>问题：目前为止比较完美的方法</div>
</div>
</body>
<script>
;$(function() {
/* 方法1 */
$('.a').on('input propertychange', function() {
$(this).next().find('.show').text($(this).val());
});

/* 方法2 */
$('.b').on('change', function() {
$(this).next().find('.show').text($(this).val());
});

/* 方法3 */
$('.c').on('keydown', function() {
$(this).next().find('.show').text($(this).val());
});

/* 方法4 */
$('.d').on('keydown', function() {
var self = this;
setTimeout(function() {
$(self).next().find('.show').text($(self).val());
})
});

/* 方法5 */
$('.e').on('input propertychange keydown change', function() {
var self = this;
setTimeout(function() {
$(self).next().find('.show').text($(self).val());
})
});

});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航