【前言】
记录一款特效，以后讲课讲解下
【主体】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery插件——仿新浪微博限制输入字数的textarea</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
*{padding: 0;margin: 0;}
.box{width: 800px;margin: 0 auto;}
#test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display: block; width: 98%; height: 80px;;}
#info{padding: 3px 0;font-family: "microsoft yahei";font-size: 14px;}
</style>
</head>
<body>
<div class="box">
<textarea id="test" width="100%"></textarea>
</div>
<script>
(function($) {
$.fn.limitTextarea = function(opts) {
var defaults = {
maxNumber: 140, //允许输入的最大字数
position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方
onOk: function() {}, //输入后，字数未超出时调用的函数
onOver: function() {} //输入后，字数超出时调用的函数
}
var option = $.extend(defaults, opts);
this.each(function() {
var _this = $(this);
var info = '<div id="info"><b>' + (option.maxNumber - _this.val().length) + '</b>/'+option.maxNumber+'</div>';
var fn = function() {
var $info = $('#info');
var extraNumber = option.maxNumber - _this.val().length;
if (extraNumber >= 0) {
$info.html('<b>' + extraNumber + '</b>/'+option.maxNumber);
option.onOk();
} else {
$info.html('已经超出<b style="color:red;">' + (-extraNumber) + '</b>个字');
option.onOver();
}
};
switch (option.position) {
case 'top':
_this.before(info);
break;
case 'bottom':
default:
_this.after(info);
}
//绑定输入事件监听器
if (window.addEventListener) { //先执行W3C
_this.get(0).addEventListener("input", fn, false);
} else {
_this.get(0).attachEvent("onpropertychange", fn);
}
if (window.VBArray && window.addEventListener) { //IE9
_this.get(0).attachEvent("onkeydown", function() {
var key = window.event.keyCode;
(key == 8 || key == 46) && fn(); //处理回退与删除
});
_this.get(0).attachEvent("oncut", fn); //处理粘贴
}
});
}
})(jQuery)
//插件调用；
$(function() {
$('#test').limitTextarea({
maxNumber: 140, //最大字数
position: 'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方
onOk: function() {
$('#test').css('background-color', 'white');
}, //输入后，字数未超出时调用的函数
onOver: function() {
$('#test').css('background-color', 'lightpink');
} //输入后，字数超出时调用的函数，这里把文本区域的背景变为粉红色
});
});
</script>
</body>
</html>
相关推荐
本教程将探讨如何利用jQuery来实现新浪微博的回复字数限制功能，这在许多社交媒体和论坛应用中都非常常见。 首先，我们需要理解目标是限制用户在输入框中输入的字符数不超过微博平台规定的最大值，例如，新浪微博...
【标题】：“简单的仿新浪微博发布框” 在网页设计和开发中，模拟知名社交媒体平台的界面元素是一种常见的练习，有助于提升开发者的设计感和交互实现能力。本项目“简单的仿新浪微博发布框”就是一个很好的实例，...
《jQuery插件charCount：实现textarea字数统计的探索与实践》 在现代网页开发中，用户交互体验的提升已经成为了一项重要的设计考量。尤其是在社交媒体和博客平台，限制输入字符数的功能，如Twitter的280字符限制和...
在本文中，我们将深入探讨如何使用jQuery来实现一个仿微博字数限制的功能。这个功能在许多社交媒体和在线论坛中非常常见，它可以帮助用户在输入文本时实时监测并限制字符数，确保符合平台的规定。 首先，我们需要...
《使用jQuery实现仿新浪微博发布页面的功能详解》 在Web开发中，模拟知名社交网络的界面和功能是一项常见的挑战。本文将深入探讨如何使用jQuery库来创建一个类似新浪微博的发布新鲜事页面，涵盖字数统计、表情支持...
本教程将详细讲解如何利用jQuery实现一个类似新浪发布微博的功能，特别是针对textarea文本框进行文字字数限制。 一、jQuery简介 jQuery是由John Resig在2006年创建的，它的核心理念是"Write Less, Do More"，通过...
《新浪微博表情jQuery插件——jquery.sinaEmotion-1.0详解》 在网页开发中，为了提升用户体验，经常会引入各种各样的JavaScript插件。其中，“新浪微博表情jQuery插件”（jquery.sinaEmotion-1.0）是一个专门用于...
通过上述步骤，我们可以用一句简单的jQuery代码实现类似新浪微博的功能——显示用户还可输入多少字符。这种方法不仅提高了用户的输入体验，同时也简化了前端开发的工作量。此外，还可以根据实际需求对这段代码进行...
自从新浪微博开放平台推出以来，各种微博应用层出不穷，作为新浪微博的忠实用户之一，我也曾开发过几个微博应用，对于微博发布应用来说，有一个功能是必不可少的，那就是表情。表情功能的实现虽说不难，但却比较繁琐...
### 新浪微博字数统计实现方法详解 #### 一、引言 在互联网时代，文本输入已经成为用户与网站互动的主要方式之一。...这种统计方法不仅适用于微博类应用，也适用于其他需要对用户输入进行字数限制的应用场景。
本示例中，我们将探讨如何使用jQuery实现textarea文本框的字数限制功能，并实时提示用户输入的字符数量。 首先，让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口，提供了一种简洁的方式来选择DOM元素、...
以下是一个简单的示例，展示了如何限制`textarea`的最大输入字数： ```html <!DOCTYPE html> 限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } <textarea id="input...
本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能，即对textarea输入框进行字数限制，并实时显示当前已输入的字符数，这对于创建表单、评论区或任何需要限制用户输入的场景非常...
本文将重点介绍标题为“jQuery 文本框字符限制插件 Textarea”的相关知识点，该插件主要用于限制用户在textarea文本框中输入的字符数。 在网页设计中，有时我们需要对用户的输入进行控制，例如限制评论长度、留言...
在微博资料修改页面，可能会有`<input>`标签用于文本输入（如昵称、简介）、`<select>`用于下拉选择（如性别选择）、`<textarea>`用于多行文本输入（如个人简介）等。 4. **按钮与链接**：`<button>`和`<a>`标签...
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中，有时我们需要对页面上的特定文本或者关键词进行...
《jQuery实现新浪微博发布页面代码详解》 在网页开发中，jQuery库因其简洁的API和强大的功能，被广泛应用于各种交互效果的实现。本篇将详细解析"jQuery新浪微博发布页面代码"，带你深入理解如何利用jQuery构建类似...
这个“jquery微博文本字数带提示限制.zip”压缩包文件显然是一个利用jQuery实现的特定功能，即在用户输入微博文本时进行字数限制并提供实时提示。这个功能在许多社交媒体平台中都能看到，它帮助用户遵守平台规定的...