使用span或input元素表示不可编辑的表单字段

Question

我刚开始twitter bootstrap。

我想创建一个禁用的表单字段。在文档中我找到了这个片段：

<input type="text" placeholder="Disabled input here..." disabled>

但在IE9中，占位符不起作用。当我使用value属性设置其工作的内容时（并覆盖其他浏览器如chrome中的palceholder文本）。

没有使用输入元素有另一种方法：

<span class="uneditable-input">Some value here</span>

这也适用于IE9和Chrome。哪种解决方案更好（与旧版浏览器兼容，如IE8,7（和6）？

Answer 1

IE 7/8/9不支持HTML5占位符。最好的解决方案必须是使用提供功能的脚本/插件（当它不存在时）

请参阅https://github.com/miketaylr/jQuery-html5-placeholder

我也有http://jquery-watermark.googlecode.com/

的丰富经验

如果HTML5可用，它们都使用HTML5，如果不是，则使用它。

它们非常简单易用。例如，要使用水印，只需包含它并在document.ready（）

中添加一行

$("#my-input").watermark('default text');

Answer 2

<span class="uneditable-input">Some value here</span>

更好的imho ..

原因 - 它会在新旧浏览器中按预期运行，并且不依赖于任何外部脚本，只有css样式uneditable-input

当您可以简单地在span标记中回显您的值，而不是为什么要使用已禁用的表单字段。??

Answer 3

当我想使用twitter bootstrap的Prepended and appended inputs时，我发现了 我必须使用input元素。它不适用于span元素。

示例：

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>

<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

Answer 4

placeholder属性是HTML5，在许多浏览器中都不起作用，尤其是旧版本，这就是它在IE9中不起作用的原因。 （即使在IE9中，Microsoft也不遵循标准。）

如果你的问题是跨度是否比placeholder属性更兼容，那么是的。所有浏览器都应支持跨度。

Answer 5

你可以使用javascript替代...

<input type="text" placeholder="Disabled input here..." onfocus="this.blur()" />