【前言】
记录一款特效，以后讲课讲解下
【主体】
<!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模仿twitter和新浪微博的textarea字数统计.zip
【标题】：“简单的仿新浪微博发布框” 在网页设计和开发中，模拟知名社交媒体平台的界面元素是一种常见的练习，有助于提升开发者的设计感和交互实现能力。本项目“简单的仿新浪微博发布框”就是一个很好的实例，...
在本文中，我们将深入探讨如何使用jQuery来实现一个仿微博字数限制的功能。这个功能在许多社交媒体和在线论坛中非常常见，它可以帮助用户在输入文本时实时监测并限制字符数，确保符合平台的规定。 首先，我们需要...
本教程将详细讲解如何利用jQuery实现一个类似新浪发布微博的功能，特别是针对textarea文本框进行文字字数限制。 一、jQuery简介 jQuery是由John Resig在2006年创建的，它的核心理念是"Write Less, Do More"，通过...
《使用jQuery实现仿新浪微博发布页面的功能详解》 在Web开发中，模拟知名社交网络的界面和功能是一项常见的挑战。本文将深入探讨如何使用jQuery库来创建一个类似新浪微博的发布新鲜事页面，涵盖字数统计、表情支持...
《新浪微博表情jQuery插件——jquery.sinaEmotion-1.0详解》 在网页开发中，为了提升用户体验，经常会引入各种各样的JavaScript插件。其中，“新浪微博表情jQuery插件”（jquery.sinaEmotion-1.0）是一个专门用于...
自从新浪微博开放平台推出以来，各种微博应用层出不穷，作为新浪微博的忠实用户之一，我也曾开发过几个微博应用，对于微博发布应用来说，有一个功能是必不可少的，那就是表情。表情功能的实现虽说不难，但却比较繁琐...
从新浪微博代码里抄的，非常不错，需要的朋友可以参考下。
以下是一个简单的示例，展示了如何限制`textarea`的最大输入字数： ```html <!DOCTYPE html> 限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } <textarea id="input...
本示例中，我们将探讨如何使用jQuery实现textarea文本框的字数限制功能，并实时提示用户输入的字符数量。 首先，让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口，提供了一种简洁的方式来选择DOM元素、...
本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能，即对textarea输入框进行字数限制，并实时显示当前已输入的字符数，这对于创建表单、评论区或任何需要限制用户输入的场景非常...
本文将重点介绍标题为“jQuery 文本框字符限制插件 Textarea”的相关知识点，该插件主要用于限制用户在textarea文本框中输入的字符数。 在网页设计中，有时我们需要对用户的输入进行控制，例如限制评论长度、留言...
《jQuery实现新浪微博发布页面代码详解》 在网页开发中，jQuery库因其简洁的API和强大的功能，被广泛应用于各种交互效果的实现。本篇将详细解析"jQuery新浪微博发布页面代码"，带你深入理解如何利用jQuery构建类似...
这个“jquery微博文本字数带提示限制.zip”压缩包文件显然是一个利用jQuery实现的特定功能，即在用户输入微博文本时进行字数限制并提供实时提示。这个功能在许多社交媒体平台中都能看到，它帮助用户遵守平台规定的...
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中，有时我们需要对页面上的特定文本或者关键词进行...
总结，jQuery新浪微博用户评论表单代码是一个集成了用户输入验证、Ajax交互和动态渲染的实例，展示了jQuery在网页交互设计中的强大能力。通过学习和实践这个代码，开发者不仅可以掌握创建评论表单的基本步骤，还能...
在新浪微博中，有一种常见的文字滚动效果，它使得信息能在有限的屏幕空间内展示更多的内容，这种效果通常被称为“跑马灯”或“滚动公告”。今天我们将深入探讨如何实现“新浪微博文字向下滚动效果”，主要关注其在...