输入框中实现字数限制

原创 2018-11-10 19:29:13 195
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>微博输入数字</title>
		<style type="text/css">
			.box{
				width:640px;
				border:8px solid pink;
				border-radius: 20px;
				margin: 20px auto;
				padding: 10px 8px;
			}
			
			.box img{
				float:left;
			}
			
			.box div{
				width:150px;
				text-align: right;
				float: left;
				margin-left:280px;
				color:#999;
			}
			
			.box textarea{
				margin:10px 5px;
				/* 设置文本域不可拖动 */
				resize: none;
				border-radius: 3px;
			}
			
			.box > span {
				float:left;
				width:50px;
				padding-left:30px;
			}
			
			
			#span1{background: url(../image/an5.png) no-repeat left center;}
			#span2{background: url(../image/an4.png) no-repeat left center;}
			#span3{background: url(../image/an3.png) no-repeat left center;}
			#span4{background: url(../image/an2.png) no-repeat left center;}
			#span5{background: url(../image/an1.png) no-repeat left center;}
			#span6{padding-left:90px;}
			
			.box input{
				width:80px;height:30px;
				background: pink;
				border-radius: 5px;
				color: #fff;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="box">
				<img src="../image/12.png" >
				<div>还可以输入<span class="num"></span>字
				</div>
				<textarea id="text" rows="10" cols="96"></textarea>
				<span id="span1">表情</span>
				<span id="span2">图片</span>
				<span id="span3">视频</span>
				<span id="span4">话题</span>
				<span id="span5">长微博</span>
				<span id="span6">公开</span>
				<input type="button" name="" id="" value="发布" onclick="Draw()"/>
		</div>
		
		<script>
			//文本域、span数字、可以输入的次数
			var text,number,m;
			window.onload=function(){
				text = document.getElementById('text');
				number = document.getElementsByClassName('num')[0];
				text.onkeyup = function aa(){
						 m = 140 - text.value.length;
						if(m>0){
							number.style.color = "#999"
						}else{
							number.style.color = "red"
						}
						number.innerHTML = m;
				}
			}
			
			//点击
			function Draw(){
				if(m>0){
					alert("发布成功!");
				}else{
					alert("字数超过最大限制,失败!")
				}
			}
			
		</script>
	</body>
</html>


发布手记

热门词条