JS限定输入文字的输入上限

最新推荐文章于 2024-07-15 18:16:26 发布

原创最新推荐文章于 2024-07-15 18:16:26 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

basic 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的输入框文字输入限制与字数统计功能，包括如何设置最大输入长度、超限提示以及字数显示。

 /**
  *限定输入文字的输入上限，超出上限自动剔除并弹窗提示，集成字数统计
  *@auther:CQL
  *@param obj:this
  *@param maxLength：制定的当前文字输入框的输入长度
  *@param message：制定的超限提示（可以为空）
  *@param messageCountId:字数统计元素的id（可以为空）
  *
  *Example:
  * <textarea   field="xxxx" onkeyup="limitLengthAdvance(this,5,'','messageCountId')"></textarea>
  * </br><span style="color: red">已输入 </span><font color="#FC0505"><b><span id="messageCountId"> 0</span></b></font><span style="color: red">&nbsp;个字</span>
  * 
  */
 function limitLengthAdvance(obj,maxLength,message,messageCountId){
 	var curLength=obj.value.length;
 	var curValue=obj.value;
 	if(curLength>maxLength){
 		if(message==undefined||message==""){
 			L5.Msg.alert('提示','最多输入'+maxLength+'个字，超出部分已经被剔除。');
 		}
 		else{
 		  L5.Msg.alert('提示',message);
 		}
 	   obj.value= curValue.substring(0,maxLength);
 	}
 	if(messageCountId==undefined||messageCountId==""){}
 	else{
 		if(curLength>maxLength){
 			document.getElementById(messageCountId).innerText = maxLength;
 		}else{
 			document.getElementById(messageCountId).innerText = curLength;
 		}
 	}
 }


/**
 *js控制输入文字长度（推荐）
 *BY:CQL
 *obj:this
 *maxLength：制定的当前textarea的文字个数
 *message：制定的超限提示（可以为空）
 *EX:
 *有提示的：
 * onkeyup="limitLength(this,15,'输入文字超过15个，请重新输入！')"
 *没有提示的：
 * onkeyup="limitLength(this,15)"
 */
function limitLength(obj,maxLength,message){
	var curLength=obj.value.length;
	var curValue=obj.value;
	if(curLength>=maxLength){
		if(message==undefined||message==""){}
		else{
		   alert(message);
		}
	   obj.value= curValue.substring(0,maxLength-1);
	}
}