首页 » HTML/CSS » 关于输入框的一些技巧

关于输入框的一些技巧

10736 15

在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感觉最后那两种是不是应该有其他简单一点的变通办法?

文章评分1次,平均分5.0

本文原始地址:https://www.tiandiyoyo.com/2013/10/something-about-input/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


15 Comments

  1. 虽然现在已经不怎么需要写代码,还是喜欢这样的文章,学习了。。

  2. 学习学习!

    有些输入框即使是正在输入也能看到框里的输入提示,是不是通过背景图像实现的

  3. 学习了,谢谢分享

  4. 番茄 :

    活到老,学到老!我一般直接到你们大神网站上去扒~嘿嘿

  5. anopos :

    学习一下也好啊. 🙂

  6. 其实我一直想在输入框内留点默认文本,只可惜不想折腾,或许用图片更简单些

  7. 这些技巧都很实用~

  8. 哈,看的很明白啊!博主费心的!

  9. size=1 自定义搜索宽度 唯一不懂这个了…

载入分页评论...