2

我刚开始使用twitter bootstrap。

我想创建一个禁用的表单域。在文档中，我发现了这个片段：

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

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

有一种不使用输入元素的替代方法：

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

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

4

5 回答 5

4

我发现，当我想使用twitter bootstrapPrepended 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>

截屏

于 2012-11-01T14:49:39.403 回答
3

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');
于 2012-11-01T14:11:18.290 回答
3 
<span class="uneditable-input">Some value here</span>

更好恕我直言。。

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

当您可以简单地在span标签中回显您的值时，为什么要使用禁用的表单字段..??

于 2012-11-01T14:33:20.957 回答
2

该placeholder属性是 HTML5 并且在许多浏览器中不起作用，尤其是较旧的浏览器，这就是它在 IE9 中不起作用的原因。（即使在 IE9 中，微软也不遵循标准。）

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

于 2012-11-01T14:09:45.070 回答
1

您可以使用 javascript 替代方案...

<input type="text" placeholder="Disabled input here..." onfocus="this.blur()" />
于 2012-11-01T14:11:40.333 回答