HTML简单表单文本输入样式

时间:2011-10-30 01:57:02

标签: html css

嘿伙计们,我只是想知道如何在输入类型的文本中执行此操作 当用户没有点击该框时。在框中显示“编辑名称”,略带灰色的字体颜色。 当用户点击框中它变为“John Doe”然后他们可以编辑它然后提交

// EDIT  不起作用,因为它已经有一个值集。我需要占位符显示,直到点击,然后值显示

2 个答案:

答案 0 :(得分:2)

如果您使用的是HTML5,Placeholder attribute即可。

如果不只是抓取jQuery或Javascript的许多水印脚本中的一个(例如jQuery Watermark

修改

使用jQuery和CSS执行所需操作的一种手动方式:

// CSS 
#name{color:#ccc;}

// HTML
<input type="text" name="name" id="name" size="30" value="Edit Name" />

// jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#name').bind('focus', function() {
    if ($(this).val() == 'Edit Name') {
      $(this).val('John Doe').css('color', '#000');
    }
  });
});
</script>

将上面代码中的jQuery部分放入HTML文档的<head>部分,您应该很高兴。

答案 1 :(得分:0)

较新的浏览器支持HTML5 placeholder属性,您可以按如下方式使用该属性:

<input type="text" value="" placeholder="Edit Name">

对于不支持它的浏览器,various fallback scripts存在,如果不支持该属性,它将自动完成工作。

如果您感兴趣,潜入HTML5的a table浏览器版本本身就支持它。