前言
大象装到冰箱里得几步?---三步,那想实现该输入框,让我们也分三部走
- 写好HTML 标签input
- 让input只读
- input输入的最大长度为4
写好HTML 标签input
<input type="text" id="name-input" >
<input type="button" id="btn" value="查看效果" >
让input只读
<script>
window.onload = function(){
//分别获取文本输入框和按钮元素
let name = document.getElementById("name-input");
let btn = document.getElementById("btn");
btn.onclick = function(){
//设置input的readOnly为true,input则为只读
name.readOnly = true;
}
}
</script>
disabled VS. readonly
共同点:都可以设置输入框input为只读
不同点:
disabled :说明该input无效,及其value值不会传递给任何程序
readonly:input只是不可编辑,但不影响值的传递
input输入的最大长度为4
btn.onclick = function(){
let length = name.value.length;
if(length<=4){
name.readOnly = true;
}
}
会发现,只要在onclick事件里添加长度判断即可
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现一个只读的最大长度为10的输入框</title>
<script>
window.onload = function(){
let name = document.getElementById("name-input");
let btn = document.getElementById("btn");
btn.onclick = function(){
let length = name.value.length;
if(length<=4){
name.readOnly = true;
}
}
}
</script>
</head>
<body>
<input type="text" id="name-input" >
<input type="button" id="btn" value="查看效果" >
</body>
</html>
每天努力一点点
谢谢你看完
