JavaScript操作表单的一些属性①

JavaScript操作表单的一些属性①

1. 禁用文本框
   虽然这种操作不是很常见，主要还是为了练习一下
   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的原因，兼容性不大好吧！