jquery输入字数,并提示剩余字数实现代码
发布网友
发布时间：2022-04-28 10:37
共2个回答
懂视网
时间：2022-05-15 01:14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery自动添加省略号</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".figcaption").each(function (i) {
var pH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > pH) {
$p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));
};
});
});
</script>
<style>
*{
padding: 0px;
margin: 0px;
}
.figcaption{
width: 300px;
height: 50px;
/*根据父元素的高度来添加省略号
*可以任意设置显示的行数
*/
border: 1px solid red;
}
</style>
</head>
<body>
<p class="figcaption">
<p>
You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.</p>
</p>
</body>
<script>
</script>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
怎样对邮箱地址格式进行验证
Vue的UI组件库自定义动态组件
热心网友
时间：2022-05-14 22:22
复制代码
代码如下:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>jquery*输入字数,并提示剩余字数</title>
<script
type="text/javascript"
src="jquery.js"></script>
<script
type="text/javascript">
function
words_deal()
{
var
curLength=$("#TextArea1").val().length;
if(curLength>5)
{
var
num=$("#TextArea1").val().substr(0,5);
$("#TextArea1").val(num);
alert("超过字数*，多出的字将被截断！"
);
}
else
{
$("#textCount").text(5-$("#TextArea1").val().length);
}
}
</script>
</head>
<body>
剩余<span
id="textCount">5</span>个字<br
/>
<textarea
name="textarea"
id="TextArea1"
cols="45"
rows="5"
onkeyup="words_deal();"
></textarea>
</body>
</html>
