前端开发者| 前端模块化开发规范 |
| 前端工程化、模块化开发方式 |
| 前端模块化开发实例 |
html 代码
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>限制文件字数字</title>
</head>
<body>
<span class=”span”>备注信息</br><span id=”stay” style=”display: none”> 您还可以输入:<span id=”txtCount”></span>个字符的描述信息</span></span>
</br><input id=”Remark_information” name=”Remark_information” type=”text”>
<script>
var lim =newlimit();
lim.txtNote =document.getElementById(“Remark_information”);
lim.txtLimit =document.getElementById(“txtCount”);
lim.limitCount =80;
lim.init();
function limit() {
var txtNote;//文本框
var txtLimit;//提示字数的input
var limitCount;//限制的字数
var txtlength;//到达限制时，字符串的长度
this.init = function () {
txtNote =this.txtNote;
txtLimit =this.txtLimit;
limitCount =this.limitCount;
txtNote.oninput=function(){wordsLimit()}; txtNote.oninput=function(){wordsLimit()};
txtLimit.innerText = limitCount;
};
function wordsLimit() {
var noteCount = txtNote.value.length;
var InPut =document.getElementById(“Remark_information”).value.length;
if (InPut < 1) {
document.getElementById(“stay”).style.display=”none”;
return
}
if (InPut >= 1) {
document.getElementById(“stay”).style.display=”inline”;
document.getElementById(“stay”).style.color=”green”;
}
if (InPut > 70) {
document.getElementById(“stay”).style.color=”red”;
}
if (noteCount > limitCount) {
txtNote.value= txtNote.value.substring(0, limitCount);
txtLimit.innerText =0;
} else {
txtLimit.innerText = limitCount – noteCount;
}
txtlength = txtNote.value.length;//记录每次输入后的长度
}
}
</script>
</body>
| 前端模块化开发概念 |
| 前端模块化开发案例 |
| 前端模块化开发的优点和缺点 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册