`
lcdngzsxx
  • 浏览: 30822 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

jquery 实时显示文本输入框字数

阅读更多
(function($){
	$.fn.artTxtCount = function(tipWrap, minNumber, maxNumber){
		var countClass = 'info',
			fullClass = 'content_overstop';
			content = 'content_color';
		var count = function(){
			val = $(this).val().length;
			if(val <= maxNumber && val >= minNumber){
				tipWrap.html('<span class="' + countClass + '">Charater Count: <font class="' + content + '">' +  val + '</font></span>');
			}else{
				tipWrap.html('<span class="' + countClass + '">Charater Count: <font class="' + fullClass + '">' + val + '</font></span>');
			};
		};
		$(this).bind('keyup change', count);
		return this;
	};
})(jQuery);

 页面需要引用jquery.min.js

$(document).ready(function(){ 

     $('#message_content').artTxtCount($('#text_length'), 100, 2000); //参数说明,显示文本的控件,最少值,最多值。
});

页面代码

<div>
<textarea id="message_content" class="lenarea" style="height:150px;" rows="20" name="message[content]" cols="40"></textarea>
<div align="right" style="margin-right:0px;">
<span id="text_length"> </span>
</div>
</div>
 

不懂的可以留言,有更好的方式也可以交流

分享到:
评论

相关推荐

    jQuery实时计算输入框字数代码.zip

    【jQuery实时计算输入框字数代码】是一种常见的前端交互功能,它允许用户在输入文本时实时查看当前已输入的字符数,通常用于限制输入的最大字符数,如评论、留言或表单填写等场景。这个压缩包包含了一个实现该功能的...

    jQuery实时统计输入框字数及限制

    项目中经常会用到文本输入框,而且需要限制输入的字数。 下面分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法,代码如下: HTML:简单的写一下,能实现功能即可。 &lt;!DOCTYPE html&gt; &lt;...

    jQuery计算文本框可输入字数代码.zip

    为了提供良好的用户体验,有时候我们需要限制文本框(input type="text")的输入字数,并实时显示剩余字数。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在...

    jQuery实现简易的输入框字数计数功能示例

    总结来说,这篇文章通过实例和步骤详解,演示了如何使用jQuery实现一个简易的输入框字数计数功能,这对于希望在网页上为用户提供字数限制反馈的开发者来说,是一个实用的教程。通过学习和应用文章中提到的技巧,...

    jQuery实时计算用户输入字数代码.zip

    当用户在文本输入框(`&lt;input type="text"&gt;` 或 `&lt;textarea&gt;`)中输入文字时,我们可以通过监听 `keyup`、`keydown` 或 `input` 事件来实时获取输入框的内容并计算字数。`keyup` 事件在用户释放键盘键时触发,`...

    输入框字数限制

    在设计用户界面时,合理设置输入框字数限制能提高数据的准确性和系统效率,同时也应提供良好的反馈机制,如显示剩余可输入字数,以增强用户体验。对于开发人员来说,理解和掌握这一技巧是创建高效、安全且用户友好的...

    jquery实现微博文字输入框 输入时显示输入字数 效果实现

    一个典型的例子是在用户输入文字时,实时显示剩余字符数或已输入字符数。本篇文档介绍了如何使用jQuery库实现这一功能,具体来说,是如何在用户使用微博文字输入框输入内容时显示当前已输入的字数。这个功能不仅增强...

    jQuery实现新浪微博回复字数限制

    2. **jQuery初始化**:在页面加载完成后,我们需要获取到输入框并绑定一个`keyup`事件监听器,这样每当用户在输入框中键入内容时,我们都可以实时更新剩余字数。 ```javascript $(document).ready(function() { ...

    jquery微博文本字数带提示限制.zip

    接着,他们会选择一个HTML元素,通常是包含文本输入框的textarea或者input标签,例如`$("#weiboText")`,并监听其`keyup`、`keydown`或`input`事件,以便在用户输入时实时检查文本长度。 为了计算文本的字数,可以...

    jQuery textarea文本框输入文字字数限制提示代码.zip

    本资源“jQuery textarea文本框输入文字字数限制提示代码.zip”提供了一个实用的功能,即对textarea输入框进行字数限制,并实时显示当前已输入的字符数,这对于创建表单、评论区或任何需要限制用户输入的场景非常...

    jquery实现textarea输入框限制字数的方法

    在本文中,主要讨论了使用jQuery来实现对textarea输入框进行字数限制的技术细节和具体实现方法。这一功能在很多网页应用中非常实用,尤其是当需要对用户输入的文本长度进行限制时。 首先,我们需要了解的是,...

    jQuery实时计算用户输入字数特效代码

    首先,我们需要在HTML页面中设置一个文本输入框(`&lt;input type="text"&gt;`或`&lt;textarea&gt;`)和一个用于显示字数统计的元素,例如一个`&lt;span&gt;`。例如: ```html &lt;textarea id="inputBox"&gt;&lt;/textarea&gt; ...

    jQuery实时计算并提示用户输入字数功能源码.zip

    在给定的资源"jQuery实时计算并提示用户输入字数功能源码.zip"中,我们可以看到一个实用的功能实现,即动态监测用户在文本框或文本区域输入的字数,并在用户接近预设限制时给出提示。这个功能在各种网页表单、评论...

    jQuery 文本文本框输入字符限制插件.

    这种提示可以以多种形式存在,例如在文本框下方显示一个小标签,或者直接在输入框旁边显示数字。这样的设计不仅限定了输入内容的长度,同时也为用户提供了一个明确的反馈,使他们了解自己的输入是否超出限制,从而...

    Jquery字数限制

    针对“Jquery字数限制”这个主题,我们主要关注的是如何利用 jQuery 来实现对用户输入文本的长度限制。这在各种场景下都非常有用,比如评论框、表单输入、即时消息等,确保用户不会输入过长的内容,从而避免数据处理...

    jquery微博文本字数带提示限制特效代码

    【jQuery微博文本字数带提示限制特效代码】是一种在网页中实现微博文本输入框字数限制及实时提示效果的技术方案。在微博应用中,通常会有限制用户输入文本的字符数,以保持信息的简洁性。jQuery是一个轻量级、高性能...

    jQuery maxlength文本字数限制插件

    ### jQuery maxlength文本字数限制插件知识点 #### 1. 插件概述 jQuery maxlength插件用于在网页中实现文本字段(如文本框和文本区域)的字数限制。该插件提供即时的字符数反馈,类似于Twitter等微博客平台上的功能...

    仿微博提示可输入剩余字数

    4. **实时更新提示**:为了给用户提供直观的反馈,我们需要在页面上显示剩余可输入的字数。这可以通过创建一个动态更新的元素,如一个`&lt;span&gt;`标签,来显示剩余字数。每次输入事件发生时,更新这个元素的文本内容。 ...

Global site tag (gtag.js) - Google Analytics