Clever Geek Handbook

Display input text as a range, problem width

I am trying to make input text look like span. I want my user to be able to type text without noticing it in the field.

I almost succeeded, the last problem I ran into was the input width. The input text is wider than the text it replaces. Here's a jsfiddle . (You can press "Texte" to dial yours).

Here's the interesting css part:

input {
    background-color: transparent;
    padding: 0px;
    border: initial;
    font: inherit;
    margin: 0px;
}
+3


source to share


1 answer


Here is an idea to try fixed width for inputs

Demo: http://jsfiddle.net/nyitsol/eotd8p4n/17/

also you can try using the same range width for input

$('span.width').width(); // returns a width value


using this get the width of the range and put it in the input field using JavaScript.

EDIT: try this, if you want to increase the input based on the text constraint, you need to increase the size as well.

http://jsfiddle.net/nyitsol/eotd8p4n/25/

 var input = $('<input onkeypress=\"this.style.width = ((this.value.length + 1) * 8) + \'px\';\" type=text>');
+1


source






More articles:


All Articles