我怎么做HTML文本框显示一个暗示的时候是空的?
-
01-07-2019 - |
题
我要搜索盒在我的网页,以显示单词"搜索"灰色斜体字。当框收到焦点,它应该看起来就像一个空洞的文字框中。如果已经存在的文本,它应该显示的案文通常(黑色的,无斜体).这将帮助我了避免混乱,通过删除的标签。
顺便说一句,这是一个页面 阿贾克斯 搜索,因此它没有按钮。
解决方案
另一个选项是,如果您很乐意仅针对较新的浏览器使用此功能,则可以使用HTML 5的占位符属性提供的支持:
<input name="email" placeholder="Email Address">
如果没有任何样式,Chrome中的内容如下所示:
您可以尝试演示此处以及 HTML5占位符样式与CSS 。
请务必查看此功能的浏览器兼容性。 3.7中添加了对Firefox的支持。 Chrome很好。 Internet <!> nbsp; Explorer仅在10中添加了支持。如果您的目标浏览器不支持输入占位符,则可以使用名为 jQuery HTML5占位符,然后只需添加以下JavaScript代码即可启用它。
$('input[placeholder], textarea[placeholder]').placeholder();
其他提示
这被称为一个"文本框"水印,以及这样做是通过JavaScript。
或如果你使用jQuery一个更好的方法:
您可以使用占位符 attributes.html HTML中的#the-placeholder-attribute“rel =”noreferrer“> placeholder
属性(浏览器支持)。 font-style
和color
可以使用CSS进行更改(虽然浏览器支持有限。)
input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
color:gray;
font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
color:gray;
font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
color:gray;
font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
color:gray;
font-style:italic;
}
<input placeholder="Search" type="search" name="q">
您可以添加和删除特殊的CSS类,并使用JavaScript修改输入值onfocus
/ onblur
:
<input type="text" class="hint" value="Search..."
onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">
然后在CSS中指定一个带有所需样式的提示类:
input.hint {
color: grey;
}
最好的方法是使用某种JavaScript库来连接JavaScript事件,例如 jQuery 或 YUI 并将您的代码放在外部.js文件中。
但是如果你想要一个快速而肮脏的解决方案,这就是你的内联HTML解决方案:
<input type="text" id="textbox" value="Search"
onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}"
onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />
已更新:添加了所需的着色内容。
我不久前在我的网站上发布了解决方案。要使用它,请导入一个.js
文件:
<script type="text/javascript" src="/hint-textbox.js"></script>
然后使用CSS class hintTextbox
:
<input type="text" name="email" value="enter email" class="hintTextbox" />
此处提供了更多信息和示例。
这是一个使用Google Ajax库缓存和一些jQuery魔术的功能示例。
这将是CSS:
<style type="text/stylesheet" media="screen">
.inputblank { color:gray; } /* Class to use for blank input */
</style>
这将是JavaScript代码:
<script language="javascript"
type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script>
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$("#search_form")
.submit(function() {
alert("Submitted. Value= " + $("input:first").val());
return false;
});
$("#keywords")
.focus(function() {
if ($(this).val() == 'Search') {
$(this)
.removeClass('inputblank')
.val('');
}
})
.blur(function() {
if ($(this).val() == '') {
$(this)
.addClass('inputblank')
.val('Search');
}
});
});
</script>
这就是HTML:
<form id="search_form">
<fieldset>
<legend>Search the site</legend>
<label for="keywords">Keywords:</label>
<input id="keywords" type="text" class="inputblank" value="Search"/>
</fieldset>
</form>
我希望这足以让你对GAJAXLibs和jQuery感兴趣。
现在变得非常容易。 在html中,我们可以为输入元素提供占位符属性。
<强> e.g。强>
<input type="text" name="fst_name" placeholder="First Name"/>
查看更多详情: http://www.w3schools.com/tags/att_input_placeholder.asp
对于jQuery用户:naspinski的jQuery链接似乎坏了,但试试这个: http://remysharp.com/2007/01/25 / jQuery的教程文本框-提示/
你获得免费的jQuery插件教程作为奖励。 :)
我发现了jQuery插件 jQuery Watermark 要比最佳答案中列出的更好。为什么更好?因为它支持密码输入字段。此外,设置水印(或其他属性)的颜色就像在CSS文件中创建.watermark
引用一样简单。
这称为<!>“; watermark <!>”;
我找到了jQuery插件 jQuery watermark 与第一个答案不同,不需要额外设置(原始答案在提交表单之前还需要特殊调用)。
使用 jQuery Form Notifier - 它是最受欢迎的jQuery插件之一并且不会遇到其他一些jQuery建议中的错误(例如,您可以自由设置水印样式,而不必担心它是否会保存到数据库中)。
jQuery Watermark直接在表单元素上使用单个CSS样式(我注意到应用于水印的CSS字体大小属性也影响了文本框 - 而不是我想要的)。使用jQuery Watermark的优点是你可以将文本拖放到字段中(jQuery Form Notifier不允许这样做)。
其他人建议的另一个人(digitalbrush.com上的那个人)会不小心将水印值提交给您的表单,所以我强烈建议不要这样做。
使用背景图片渲染文字:
input.foo { }
input.fooempty { background-image: url("blah.png"); }
然后你所要做的就是检测value == 0
并应用正确的类:
<input class="foo fooempty" value="" type="text" name="bar" />
jQuery JavaScript代码如下所示:
jQuery(function($)
{
var target = $("input.foo");
target.bind("change", function()
{
if( target.val().length > 1 )
{
target.addClass("fooempty");
}
else
{
target.removeClass("fooempty");
}
});
});
你可以轻松地读一个方框<!>;搜索<!>然后当焦点改变为它时,文本将被删除。像这样:
<input onfocus="this.value=''" type="text" value="Search" />
当然,如果你这样做,用户自己的文字会在点击时消失。所以你可能想要使用更健壮的东西:
<input name="keyword_" type="text" size="25" style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">
首次加载页面时,会在文本框中显示“搜索”,如果需要,则显示为灰色。
当输入框获得焦点时,选择搜索框中的所有文本,以便用户可以开始输入,这将删除过程中的所选文本。如果用户想要再次使用搜索框,这也可以很好地工作,因为他们不必手动突出显示以前的文本来删除它。
<input type="text" value="Search" onfocus="this.select();" />
我喜欢<!>“知识Chikuse <!>”的解决方案 - 简单明了。只有在页面加载准备就绪时才需要添加模糊调用,这将设置初始状态:
$('input[value="text"]').blur();
你想把这样的东西分配给onfocus:
if (this.value == this.defaultValue)
this.value = ''
this.className = ''
这对于onblur:
if (this.value == '')
this.value = this.defaultValue
this.className = 'placeholder'
(你可以使用一些更聪明的东西,比如框架函数,来做你想要的类名转换。)
使用这样的CSS:
input.placeholder{
color: gray;
font-style: italic;
}
$('input[value="text"]').focus(function(){
if ($(this).attr('class')=='hint')
{
$(this).removeClass('hint');
$(this).val('');
}
});
$('input[value="text"]').blur(function(){
if($(this).val() == '')
{
$(this).addClass('hint');
$(this).val($(this).attr('title'));
}
});
<input type="text" value="" title="Default Watermark Text">
简单的Html'required'标签很有用。
<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>
来自 http://asp.net 的用户AJAXToolkit