像Gmail登录页面一样的文本框
[英]Textbox like gmail login page
问题描述
I want a textbox functionality like a gmail login page textbox. 
我想要像gmail登录页面文本框这样的文本框功能。 Right now I have code like this: 现在我有这样的代码：
<script>
function inputFocus(i){
if(i.value===i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value===""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<body>
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
...
</body>
The problem with this code is when I select the tetbox, type "First Name" and if I reselect the textbox the text is clearing. 这段代码的问题是，当我选择tetbox时，键入“名字”，如果我重新选择文本框，则文本将被清除。 And also gmail login page textbox functionality looks great, until I type a letter it shows the transperent text. gmail登录页面文本框功能看起来也很棒，直到我键入一个字母显示透明文本为止。 But I don't know how to implement it. 但是我不知道如何实现它。
3 个解决方案
解决方案1
2 2014-12-23 09:53:11
对于“透明文本”，您需要使用占位符属性：
<input type="text" name="firstname" ... placeholder="Email">
解决方案2
1 2014-12-23 10:01:26
are you looking for a placeholder ?? 您在寻找占位符吗？ If so... you can do like this.. 如果是这样，您可以这样做。
<input type="text" name="somename" id="someid" value="" placeholder="Email">
Placeholder is used to display the text in the text box and will disappear as soon as you start typing.. Placeholder用于在文本框中显示文本，并且在您开始键入时便会消失。
解决方案3
0 已采纳 2014-12-23 11:12:16
If you want to delete the "transparent text" once start typing, you can use placeholder attribute of input element 如果要在开始输入后删除“透明文本”，则可以使用输入元素的占位符属性
This attribute is introduced in HTML5 to handle this scenario without writing any peice of javascript code HTML5中引入了此属性以处理这种情况，而无需编写任何漂亮的javascript代码
Your html code should look like this 您的html代码应如下所示
<input type="text" name="firstname" placeholder="First Name"/>
This will also work as desired when you delete your text, as it will reset the transparent text back again. 删除文本时，此操作也将按需要运行，因为它将再次重置透明文本。
Also, here is a working example on jsfiddle 另外， 这是jsfiddle上的一个工作示例
I also, encourage you to review new elements and attributes introduced in HTML5 , it will save a your time writing a lot of javascript to handle already built in functionalities 我也鼓励您回顾HTML5中引入的新元素和属性 ，这将节省您编写大量JavaScript来处理已经内置的功能的时间
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.