千丝海阁

在html中，我们要由用户控制输入的时候，可以用input轻松实现，最近在做一个简单的程序，其中涉及到了input，整理一下所用心得，都是些基础，大神请自动切换到打酱油模式。

默认的input框是这个样子的，没有做任何的修饰：

<input type="input" />

自定义宽度的input框：

<input type="input" size=1 />

带有默认值的input框：

<input type="input" value="默认值" />

input输入框的默认值是黑色的，如果我们想将它改成灰色，以区分是默认值，还是用户输入的话，可以这样写。

<input type="input" value="默认值" style="color:gray;"  />

点击input输入框，自动消除默认值，并且如果框内值是空的话，鼠标移出焦点后会自动添加默认值：

<input type="input" value="默认值" style="color:gray;" onfocus="if (value =='默认值'){value =''}" onblur="if (value ==''){value='默认值'; />

但是上面这种方法会有个问题，就是用户手动输入的内容也会变成灰色，这和我们初衷是相违背的，我们是想通过颜色来区分默认值和用户输入的值，由用户输入的内容为黑色，默认值为灰色。于是修改一下代码变成下面这种：

<input type="input" value="默认值" onfocus="if (value =='默认值'){value =''}" onblur="if (value ==''){value='默认值';}" style="color:gray;" onkeypress="press(this)" />
function press(e) {
	{
		e.style.color = "black";
	} 
}

接着又会发现上面的代码还是会有问题，当用户点击输入框后，不输入任何内容，保留框内内容为空，然后鼠标移出焦点后，默认值也会跟着变为黑色的了，继续改：

<input type="input" value="默认值" onfocus="if (value =='默认值'){value =''}" onblur="if (value ==''){value='默认值';defaulstyle(this)}" style="color:gray;" onkeypress="press(this)" />
function press(e) {
	{
		e.style.color = "black";
	} 
}
function defaulstyle(e) {
	e.style.color = "gray";
}

结束，以上是对input输入框的一些基础技巧的总结。tiandi感觉最后那两种是不是应该有其他简单一点的变通办法？

---