js实现限制容器中字符个数
2024-10-21 05:44:14
html:
<div class="ellipsis">
夜空中最亮的星/请指引我走出去/夜空中最亮的星 是否知道/那曾与我同心的身影 如今在哪里/夜空中最亮的星 是否在意/
</div>
js:
$(document).ready(function(){
//限制字符个数
$(".ellipsis").each(function(){
var maxwidth=39;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'…');
alert();
}
});
});
另一种:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入字符限制</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style>
.tucao_dl {
width: 518px;
overflow: hidden;
}
.tucao_dl dt {
clear: both;
margin-top: 5px;
}
.tucao_dl dt textarea {
background: none;
border: none;
border: 1px solid #ddd;
width: 510px;
height: 135px;
line-height: 24px;
padding-top: 3px;
font-size: 14px;
color: #999;
font-family: '微软雅黑';
resize: none;
}
.tucao_dl dt i {
color: #ff6600;
}
.tucao_dl dd {
float: left;
color: #999;
font-family: '微软雅黑';
font-size: 14px;
}
.tucao_dl dd i {
color: #ff6600;
}
.focusing{background-color: rgba(22,219,10,0.5);} </style>
</head>
<body> <dl class="tucao_dl" >
<dt>
<textarea id="OtherText" title="http://www.cnblogs.com/Han39/。" class="feedbackT" onkeyup="maxlength(this)" onfocus="editAdvice()"></textarea>
</dt>
<dd>您还可以输入<i>200</i>字</dd>
</dl> </body>
<script>
$(document).ready(function(){
$('#OtherText').each(function(){
$(this).val($(this).attr('title'));
}).focus(function(){
if(this.value == $(this).attr('title')){
$(this).val('').addClass('focusing');
}; }).blur(function(){
if(this.value == ''){
$(this).val($(this).attr('title')).removeClass('focusing');
};
}); });
function maxlength(obj){;
var num = $(obj).val().length;
if(200-num>=0){
$('.tucao_dl dd').find('i').text(200-num);
}
obj.value = obj.value.slice(0, 200);
}
function editAdvice(){
var advice=removeAllSpace($("#OtherText").val());
var title=removeAllSpace($("#OtherText").attr("title"));
if(advice==null ||advice.length<=0 || advice ==title){
$("#OtherText").text("");
} }
</script>
</html>
最新文章
- PHP 删除文件(图片)
- C# 为私有方法添加单元测试(反射)
- Animation用法
- SQLServer触发器的使用
- Nginx+Keepalived实现高可用站点
- centos Supervisor
- sysbench 安装 原创
- Android GridView用法介绍
- Unity Canvas vs Panel
- ios外包公司——技术分享:手机应用开发步骤
- nginx 深入篇
- Spring+Hessian+Maven+客户端调用实例
- PHP经典算法百钱买小鸡
- HDU-6156 Palindrome Function(数位DP)
- 手把手教你在CentOS 7.4下搭建Zabbix监控(转)
- android 获得屏幕宽度和高度
- laravel(4.2) +Zizaco
- MongoDB学习笔记~复杂条件拼接和正则的使用
- mysql官网下载linux版本安装包
- sqlserver中获取最后一个字符所在的位置
热门文章
- P1088 火星人——全排列函数
- 2019 ASP.NET / ASP.NET Core 学习路线 (有中文翻译)
- ubuntu之路——day11.1 如何进行误差分析
- Enhancer | 增强子 专题
- MiniUI treeGrid 树节点展开和不展开的性能差别很大
- Docs-.NET-C#-指南-语言参考-关键字-值类型:struct
- Flutter响应式编程 - RxDart
- Python3基础 变量命名 区分大小写
- pytorch如何先初始化变量,然后再赋值
- kinova environment