作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More所有交互方法都依赖于jQuery函数库
1、div+css布局组件
<div style="float: left;">
<input id="txt" style="width: 70%;padding:0 3%;height: 30px;border: none;outline: none;">
</div>
<div style="position: absolute; right: 0; top: 0; height: 100%; padding: 0 10px; background: #fff; color: #aaa;">
<span id="count" style="">5</span><span>个字符</span>
</div>
</div>2、简单交互实现
- html代码
<div style="float: left;">
<input id="txt" style="width: 70%;padding:0 3%;height: 30px;border: none;outline: none;">
</div>
<div style="position: absolute; right: 0; top: 0; height: 100%; padding: 0 10px; background: #fff; color: #aaa;">
<span id="count" style="">5</span><span>个字符</span>
</div>
</div>- js代码
$(document).on("keyup", "#txt", function () {
var length = $(this).val().length;
$("#count").html(length);
});
</script>
