javascript中的鍵盤抬起事件onkeyup實現(xiàn)文本域的輸入字數(shù)控制

實際運用中啊隨處可見的就是PC端的字數(shù)控制案例，如標題只能多少字內(nèi)容多少字密碼多少長度等等等等，那么這些功能它是怎么實現(xiàn)的呢，今兒這個小分享道哥就給大家分享一下怎么用js去實現(xiàn)文字的輸入控制。

已知有如下html代碼

<p class="p1"> 
計算剩余字數(shù)<br> 
<textarea cols="70" rows="8" id="msg" onkeyup="test()"></textarea><br> 
<span id="msg_s"></span> 	
</p>

要實現(xiàn)在文本域textarea中輸入長度不能超過50的字符并且剩余字數(shù)跟隨輸入的內(nèi)容不斷變化，提示還可以輸入多少個字符（要注意的是一個中文占兩個字符一個英文字母或者符號占一個字符）

代碼如下

<script type="text/javascript">
	function test2(){
		//取出文本框中文本內(nèi)容 
		var a=document.getElementById("msg");
		var len=50-a.value.length; //與50作比較，得道剩余字數(shù)
		if(len>0){ 
			//如果剩余字數(shù)大于0，則提示剩余字數(shù)
			document.getElementById("msg_s").innerHTML="您還剩余"+len+"個字";
		}else{
			//如果剩余字數(shù)小于0，即字數(shù)已超出，則只留前50個字
			document.getElementById("msg_s").innerHTML="您還剩余0個字";
			a.value=a.value.substr(0,50);
		}
	}
</script>

運行結(jié)果如下

時候需要控制下文字數(shù)，不然就會溢出，頁面就會變樣不美觀。這時我們就可以用css控制字數(shù)，超出部分顯示省略號。可以不換行，超出部分顯示省略號，也可以可以換行，多行，超出部分顯示省略號。

1.不換行，超出部分顯示省略號

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字數(shù)，超出部分顯示省略號</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隱藏*/
overflow:hidden;
/*不換行設定*/
white-space:nowrap;
/*超出部分的文字顯示省略號*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字數(shù)，超出部分顯示省略號用css控制字數(shù)，超出部分顯示省略號</div>
</body>
</html>

效果圖如下：

2.可以換行，多行，超出部分顯示省略號

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字數(shù)，超出部分顯示省略號用css控制字數(shù)，超出部分顯示省略號</div>
<div class="box">2.用css控制字數(shù)，超出部分顯示省略號用css控制字數(shù)，超出部分顯示省略號</div>
</body>
</html>

效果圖如下：

注：此方法適用于WebKit瀏覽器及移動端。

除注明外的文章,均為來源:湯久生博客,轉(zhuǎn)載請保留本文地址！

原文地址：http://tangjiusheng.com/divcss/169.html

、將富文本html內(nèi)容轉(zhuǎn)換為純文本

formatrichtext = (richtext, len = 0) => {
    let content = richtext.replace(/<.+?>/g, '');    
    content = content.replace(/ /ig, ''); /* 去除  */    
    content = content.replace(/\s/ig, ''); /* 去除空格 */
    return content;
}

2、限制展示的文本長度

在線咨詢

上一篇：什么是flash什么是html5？
下一篇：Javascript：簡單易懂的，復選框聯(lián)動全選，很實用！

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

javascript中的鍵盤抬起事件onkeyup實現(xiàn)文本域的輸入字數(shù)控制

您的項目需求