How to create a seamless input field?

Question

I am currently working with a web-project that needs a table with some information. An example is a sentence like this:

• Boost revenue by X %
• Sell X more items

Is it any way to have a sentence like this, and just click on the X and fill inn a value? I have played with input-field, but i it is hard to format and make it look okey.

The input is working okey, but any suggestions to make it look flawless and less like two different sentences?

Suggestions? I have two divs for you to look at:

<!-- Base one -->
<div id="baseOne">
    * Boost revenue by <span id="baseOneReplace">X</span> %
</div>

<!-- Base two -->
<div id="baseTwo">
    * Boost revenue by <input id="baseTwoInput" value="X"> %
</div>

http://jsfiddle.net/rLr7C/

Answer 1

Use the contenteditable attribute on a <span> element. The base attribute has very wide compatibility so you shouldn't have any issues:

<div id="baseTwo">
    * Boost revenue by <span id="baseTwoInput" contenteditable>X</span> %
</div>

Answer 2

The accessible way is to use an input element but style it as needed. The most obvious issue here is that by default an input box is wide, for about 20 characters. A way to fix this:

<label for="boost">Boost revenue by</label>
<input id="boost" size=2 style="width: 2em">%

This approach works even when JavaScript is disabled, contrary to using span with contenteditable (which itself does not require JavaScript, but the only way to get the data from such an element into the submitted form data is to use JavaScript).

If desired, add placeholder="X" into the input tag. Using value="X" is misleading, since it sets the default (initial) value, which should be a valid value (and a value that the user often wants to choose).

You can also set the font family and font size of input the same as for the surrounding text, but the best way of doing this depends on the overall design of styling.

It is possible to remove the default border, but hardly a good idea: how would the user see that there is a place where he can and is expected to enter some input?