55 lines
1.4 KiB
HTML
55 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>留言字数限制检测</title>
|
|
<style>
|
|
.main {
|
|
width: 500px;
|
|
height: 306px;
|
|
border: 1px solid #e3e3e3;
|
|
position: relative;
|
|
}
|
|
.main span {
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
}
|
|
textarea {
|
|
outline:none;
|
|
resize:none;
|
|
}
|
|
.error {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<div class="main">
|
|
<textarea name="" oninput="texts()" id="mess" cols="80" rows="20"></textarea>
|
|
<span id="shengyu">剩余字数 10/10</span>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
var total = 10;
|
|
function texts () {
|
|
var tips = document.getElementById("shengyu");
|
|
var Message = document.getElementById("mess").value
|
|
if( (total - Message.length) <= 0){
|
|
tips.innerHTML= "剩余字数 <b class='error'>0</b>/10"
|
|
document.getElementById("mess").value = Message.substring(0,10)
|
|
}else {
|
|
tips.innerHTML= "剩余字数 " + ((total - Message.length).toString()) + "/10"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |