JavaScript操作表单的一些属性①
- 禁用文本框
虽然这种操作不是很常见,主要还是为了练习一下
css部分
<style>
input {
height: 40px;
width: 300px;
color: #ccc;
}
button {
margin-left: 5px;
}
</style>
body部分
账号:<input type="text" id="inp1" value="请输入用户名"><button>锁定</button><button>重启</button><br><br>
密码:<input type="password" id="inp2">
<script>
var inp1 = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
btn1.onclick = function(){
inp1.disabled = true;
}
btn2.onclick = function(){
inp1.removeAttribute("disabled");
}
</script>
效果如下图:
2. 文本框获取焦点事件
通过两种不同类型的输入框来做文本框获取焦点
①第一种是这种带value值得
css部分
<style>
input {
height: 40px;
width: 300px;
padding-left: 5px;
color: #ccc;
}
</style>
JavaScript部分
账号:<input type="text" id="inp1" value="请输入用户名">
<script>
// 需求是:文本框获得焦点时,value值清空,失去焦点时,value还原(伴随着文字颜色的变化)
var inp = document.getElementsByTagName("input")[0];
inp.onfocus = function(){
if(inp.value === "请输入用户名"){
inp.value = "";
inp.style.color = "#000";
}
}
inp.onblur = function(){
if(inp.value =""){
inp.value = "请输入用户名";
inp.style.color = "#ccc";
}
}
</script>
效果如下:
②第二种是用了一个定位块来代替value值
css部分
<style>
input {
height: 40px;
width: 300px;
padding-left: 5px;
}
label {
position: absolute;
top: 20px;
left: 68px;
color: #ccc;
cursor: text;
}
</style>
JavaScript部分
账号:<label for = "inp">请输入用户名:</label><input type="text" id="inp">
<script>
var inp = document.getElementsByTagName("input")[0];
var lab = document.getElementsByTagName("label")[0];
inp.onfocus = function (){
lab.style.display = "none";
}
inp.onblur = function(){
if(inp.value == ""){
lab.style.display = "block";
}
}
</script>
之所以不用placeholder的原因,兼容性不大好吧!