CODEWITHSUNDEEP
csshtmltwitter-bootstrap
timaschew
timaschew

Reputation: 16612

use span or input element for not editable form field

I just started with twitter bootstrap.

I want to create a disabled form field. In the documention I found this snippet:

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

But in IE9 the placeholder doesn' work. When I use the value attribute to set the content it works (and overwrite the palceholder text, which worked in other browsers like chrome).

There is an alternative way without using the input element:

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

This also works in IE9 and chrome. Which solution is better (compatible with old browsers, like IE8, 7 (and 6) ?

Upvotes: 3

Views: 10327

Answers (5)

timaschew
timaschew

Reputation: 16612

I found out, when I want to use the Prepended and appended inputs of twitter bootstrap I must use the input element. It doesn't work with the span element.

Example:

<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>

Screenshot

Upvotes: 4

000
000

Reputation: 3950

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

is better imho..

Reason- it will act as expected in new and old browsers and it doesn't depend on any external script but only css style uneditable-input

When you can simply echo your value in a span tag than why to use a disabled form field..??

Upvotes: 3

davidkonrad
davidkonrad

Reputation: 85568

IE 7/8/9 doesn't support the HTML5 placeholder. The best solution must be to use a script/plugin that provide the functionality (when it does not exist)

See https://github.com/miketaylr/jQuery-html5-placeholder

I also have had great experiences with http://jquery-watermark.googlecode.com/

They both use the HTML5 if it is available, and emulate it if it's not.

They are incredible simple to use. To use watermark for instance, just include it and add a line to your document.ready()

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

Upvotes: 3

George
George

Reputation: 36794

You could go with the javascript alternative...

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

Upvotes: 1

Joshua Dwire
Joshua Dwire

Reputation: 5443

The placeholder attribute is HTML5 and does not work in many browsers, especially older ones, which is why it doesn't work in IE9. (Microsoft doesn't follow standards even in IE9.)

If your question is if a span would be more compatible than the placeholder attribute, then yes it is. A span should be supported by all browsers.

Upvotes: 2

Related Questions