CODEWITHSUNDEEP
jqueryhtmlcss
user3649195
user3649195

Reputation: 115

Input textfield hidden when not typing

When I type inside my input form the text only shows momentarily before vanishing, the only way I can prevent this is if I keep my finger down on a letter of my keyboard.

This problem only began to occur when I made a resizeInput attribute which makes the input box change according to the value inside of it, e.g. input box gets bigger with every letter I type.

Is there anyway I can prevent this from happening?

* Something is up with the jquery in the jsfiddle, the resizeInput isn't working for some reason which doesn't give you the "text only shows momentarily before vanishing" effect. However the issue is still the same if you click outside the text box

JS Fiddle: http://jsfiddle.net/bx15jdw0/

HTML

<input id="message" type="text" placeholder="It's your turn to type....!" required="required">

Upvotes: 1

Views: 47

Answers (3)

ByronMcGrath
ByronMcGrath

Reputation: 375

Remove your line-height or make it smaller

http://jsfiddle.net/bx15jdw0/7/

input 
{
display: block;
margin: 20px;
width: auto;
height: 60px;
font-size: 50px;
color: #000000;
outline:none;
}

Upvotes: 0

Dany Minassian
Dany Minassian

Reputation: 169

Remove line-height from the css and it will work

updated fiddle : http://jsfiddle.net/bx15jdw0/3/

Your new CSS: 

input 
{
    display: block;
    margin: 20px;
    width: auto;
    height: 60px;
    font-size: 50px;
    color: #000000;
    outline:none;
 }

line-height is too big for the input thats why it does this. Try making it smaller and it will work

Upvotes: 0

Anton
Anton

Reputation: 32581

Remove line-height from the css and include jQuery to your fiddle and it will work.

DEMO

Upvotes: 5

Related Questions