`

判断文本框还剩多少字符可以输入

阅读更多
javascript:
function $(id) {
    return document.getElementById(id);
}

var maxLen=255;
function checkMaxInput(){
	if($("summary").value.length>maxLen){
		$("summary").value=$("summary").value.substring(0,maxLen);
	}else{
		$("leaves").innerHTML=maxLen-$("summary").value.length;
	}
}

<tr>
  <td>摘要:</td>
  <td>
	<html:textarea  property="summary"  rows="5" cols="60"  onkeyup="checkMaxInput()"/>
	<br>
	 还可以输入<span class="red" id="leaves">255</span>个字符
   </td>
</tr>



jQuery插件textlimit实现Javascript统计和限制字符个数功能

http://www.biuuu.com/p870.html

使用jQuery插件textlimit可以实现统计和限制字符个数功能,可应用于文本框与文本区域,
当输入文字时textlimit插件会及时统计当前文本框与文本区域中的字符个数,如果达到限制数则不允许输入,同时可设置字符删除速度,

使用实例
一,包含文件部分

   1. <script type="text/javascript" src="jquery.js"></script>
   2. <script type="text/javascript" src="textlimit.js"></script>

二,HTML部分

   1. <input type="text" name="test" value="" id="test" /><span>20</span>/256

三,Javascript部分

   1. <script type="text/javascript">
   2. jQuery(document).ready(function(){
   3. jQuery("#test").textlimit("span",256);
   4. });
   5. </script>

当在ID为test的文本框中输入文字时,textlimit插件统计当前输入字符个数并显示在一个span的元素中,如上效果图,textlimit接口如下:

   1. textlimit(counter_el, thelimit, speed)

接口参数说明:
counter_el表示显示当前统计个数的选择器标签,如:span
thelimit表示限制个数,也就是最多可输入的个数,如:256
speed表示删除字符速度,默认为15,注意,如果不需要可设置为-1,但不能是0

注意:英文字符与汉字字符都统计为一个字符

textlimit插件统计和限制字符数非常简单,具体大家可以看看textlimit的库文件,非常值得推荐。
/*
 * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields
 * 
 * pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0)
 * Example: jQuery("Textarea").textlimit('span.counter',256)
 *
 * $Version: 2009.07.25 +r2
 * Copyright (c) 2009 Yair Even-Or
 * vsync.design@gmail.com
*/
(function(jQuery) {
	jQuery.fn.textlimit=function(counter_el, thelimit, speed) {
		var charDelSpeed = speed || 15;
		var toggleCharDel = speed != -1;
		var toggleTrim = true;
		var that = this[0];
		var isCtrl = false; 
		updateCounter();
		
		function updateCounter(){
			if(typeof that == "object")
				jQuery(counter_el).text(thelimit - that.value.length+" characters remaining");
		};
		
		this.keydown (function(e){ 
			if(e.which == 17) isCtrl = true;
			var ctrl_a = (e.which == 65 && isCtrl == true) ? true : false; // detect and allow CTRL + A selects all.
			var ctrl_v = (e.which == 86 && isCtrl == true) ? true : false; // detect and allow CTRL + V paste.
			// 8 is 'backspace' and 46 is 'delete'
			if( this.value.length >= thelimit && e.which != '8' && e.which != '46' && ctrl_a == false && ctrl_v == false)
				e.preventDefault();
		})
		.keyup (function(e){
			updateCounter();
			if(e.which == 17)
				isCtrl=false;

			if( this.value.length >= thelimit && toggleTrim ){
				if(toggleCharDel){
					// first, trim the text a bit so the char trimming won't take forever
					// Also check if there are more than 10 extra chars, then trim. just in case.
					if ( (this.value.length - thelimit) > 10 )
						that.value = that.value.substr(0,thelimit+100);
					var init = setInterval
						( 
							function(){ 
								if( that.value.length <= thelimit ){
									init = clearInterval(init); updateCounter() 
								}
								else{
									// deleting extra chars (one by one)
									that.value = that.value.substring(0,that.value.length-1); jQuery(counter_el).text('Trimming... '+(thelimit - that.value.length));
								}
							} ,charDelSpeed 
						);
				}
				else this.value = that.value.substr(0,thelimit);
			}
		});
		
	};
})(jQuery);
分享到:
评论

相关推荐

    JS与jQuery判断文本框还剩多少字符可以输入的方法

    本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法。分享给大家供大家参考,具体如下: javascript部分: function $(id) { return document.getElementById(id); } var maxLen=255; function ...

    VB判断文本框的位数

    通过以上方式,你可以根据实际需求,灵活地在VB6中实现对文本框字符位数的判断和控制,从而实现各种功能,如数据验证、输入限制等。在编程过程中,理解并熟练运用对象的属性和方法是非常关键的,这将帮助你更好地...

    判断文本框只能输入中文汉字的代码.rar

    在这个"判断文本框只能输入中文汉字的代码"示例中,我们将探讨如何使用JavaScript来实现这一功能。 首先,我们需要明白在JavaScript中,可以通过监听`input`或`keyup`事件来实时获取用户在文本框(`...

    Jsp中判断文本框是否为空

    ### JSP中判断文本框是否为空 在Web开发过程中,前端表单验证是十分重要的环节之一,它能够确保用户输入的数据符合预期格式或要求,从而提高用户体验并减轻后端服务器的压力。本文将详细介绍如何在JSP(JavaServer ...

    C#判断多个文本框是否为空的方法

    在用户未输入任何内容时,`Text`属性的值通常是空字符串(""),因此我们可以通过检查这个属性来判断文本框是否为空。 要判断多个文本框是否为空,可以编写一个自定义方法,接受一个TextBox类型的数组作为参数。...

    js文本框限制输入 多种情况

    如果需要文本框只允许输入英文字母及某些特定字符,例如`-`、`_`等,可以使用以下代码: ```html (/[^a-zA-Z\-\_]/ig, '')"&gt; ``` 这里用到了正则表达式`[^a-zA-Z\-\_]/ig`,其中`i`表示不区分大小写,`g`表示全局...

    js 中文判断 判断文本框内是否含有中文

    以上就是使用JavaScript判断文本框内是否含有中文字符的几种常见方法。根据实际应用场景和兼容性要求,你可以选择合适的方式来实现这个功能。同时,注意在处理用户输入时,要考虑到各种可能的边界情况,以提供更健壮...

    文本框的输入限制

    例如,`type="text"`定义了一个基本的文本输入框,而`maxlength`属性可以限制用户输入的最大字符数。此外,`pattern`属性则允许我们设置正则表达式,用于验证输入内容是否符合特定格式,如邮箱、电话号码等。 在...

    c# 文本框只能输入数字

    // 阻止非数字字符输入 } // 如果输入的是小数点且文本框中已存在小数点,则阻止输入 if (e.KeyChar == 46 && ((TextBox)sender).Text.IndexOf(".") &gt;= 0) { e.Handled = true; } } catch (Exception ex)...

    最新输入文本框测试用例.doc

    2. **特定字符**:验证是否可以输入字母、特殊符号等非数字字符。 3. **首位为0**:检查整数首位的0是否被接受。 4. **整数末位为0**:测试系统如何处理整数末尾的0。 5. **正负数值**:确认系统对正数、负数和0的...

    js限制文本框只输入正整数

    在探讨如何利用JavaScript限制文本框只输入正整数这一主题时,我们首先应当明确目标:确保用户在文本框中输入的数据仅包含正整数,即非负整数(不包括小数、负数以及任何非数字字符)。这在许多场景下至关重要,比如...

    C#文本框只能输入数字

    通过判断用户输入的字符是否为数字或特定的控制字符(如Backspace和Enter),我们可以决定是否允许该字符被添加到文本框中。具体来说: 1. **判断数字字符**:利用`Char.IsNumber`方法来判断字符是否为数字。 2. **...

    js达到文本框的最大长度时跳到下一个文本框

    当输入的字符数量等于最大长度时,我们获取当前元素的`tabIndex`属性值,并判断是否小于表单元素的总数量。如果条件满足,则通过`focus()`方法将焦点转移到下一个元素上。 #### 方法二:使用`id`属性 另一种实现...

    Vb判断输入数字、字符的方法及例子

     Vb判断输入数字、字符的方法及例子,本文本框是只允许输入数字的,如果你输入了其它类型或是混杂有其它类型的字符,那么后面的文本框会适时给出提示,告诉你输入有误。虽然是简单的小例子,但却是挺实用的,特别是...

    VB 文本框输入文字过滤

    我们检查`KeyAscii`是否在数字0到9的ASCII码范围内,如果不是,则将其设为0,这样VB就会忽略此次按键事件,防止非数字字符输入到文本框。 除了数字,我们还可以过滤其他类型的字符,例如大写字母、小写字母、特殊...

    java在文本框中输入数字,当数字大于1000时提示大于一千。

    当数字大于1000时弹出确认对话框,提示是否将数字加入文本框中,选择是加入,选择否不加入,并且有简单的是否是数字的判断,如果不是数字就会弹出提示对话框,但这仅仅是简单的数字判断,如果是数字加字符的输入将...

    winForm处理文本框只能输入数字

    通过检查这个值,我们可以判断用户尝试输入的字符是否为数字。 ### 关键点三:实现代码详解 在提供的代码片段中,作者定义了一个字符数组`keys`,包含了所有数字字符(0-9)以及退格键(` `,其实际表示的是ASCII...

    vb2005限制文本框输入内容

    这段代码首先判断按键对应的字符是否为数字(`Char.IsDigit(e.KeyChar)`),如果不是数字并且不是退格键(`ControlChars.Back`,用于删除字符),则设置`e.Handled = True`阻止输入,并弹出提示信息。 3. 更复杂的...

    js判断文本框剩余可输入字数的方法

    知识点六:字符输入控制与提示 在表单`form`元素中,通过`textarea`标签创建了一个多行文本输入框。使用`onkeyup`和`onmousedown`事件监听器,当用户在文本框中输入或点击鼠标时,都会触发`checkWord`函数,从而检查...

Global site tag (gtag.js) - Google Analytics