實現文本框輸入字數受限制效果

很多網站的表單提交頁面中文本框輸入時會出現限制輸入的字數，然后還會統計你已經輸入多少字數剩余多少。今天就來簡單寫一個類似的例子，有興趣的小伙伴可以參考下：

效果圖：

html:

JS代碼：

首先獲取輸入的字節數然后用總限制字數減去輸入的等于已經輸入多少賦值給rem.最后就計算id為id2中剩余輸入的字數。

、將富文本html內容轉換為純文本

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

2、限制展示的文本長度

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

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

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字數，超出部分顯示省略號</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控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</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控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
<div class="box">2.用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
</body>
</html>

效果圖如下：

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

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

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

在線咨詢

上一篇：APP外包開發-原生開發和WEB開發的區別
下一篇：JavaScript中如何高效刪除數組中的某個元素

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

實現文本框輸入字數受限制效果

您的項目需求