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>

/

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

• javascript
• html

• Just use CSS to remove the border and resize the box: jsfiddle/rLr7C/1 – ElendilTheTall Commented Jul 2, 2014 at 8:14
• you can use jquery to replace X with input field within the given div. Yes, it is possible to click on X and make a input field visible and enter the value into it. – Murtaza Commented Jul 2, 2014 at 8:14
• When u click on the field , you want to enter a value right ? – cache Commented Jul 2, 2014 at 8:16

4 Answers 4

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

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

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?

I just made a small jQuery script for this. Maybe this will help you:

JSFIDDLE

Javascript:

$('#baseOneReplace').click(function() {
    $(this).html('<input value="' + $(this).text() + '">');
    $(this).find('input').focus();
    $(this).focusout(function() {
        $(this).html($(this).find('input').val());
    });
});

CSS:

#baseOneReplace input {
    border: 0;
    width: 2em;
}

Add some CSS to format it (the outline:0 removes the glowing selection box unless you need it)

#baseTwo input {
    border: 0px;
    width: 14px;
}

#baseTwo input:focus {
    width: 14px;
    outline: 0;
}

Add a

onfocus="this.value = '';"

to the input element to allow it to remove the X on click

JSFiddle