CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
nielsv
nielsv

Reputation: 6810

Show an input text field as plain text

I want to have a sort of editable div like this:

<div onClick="this.contentEditable='true';">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</div>

But it has to be an input field so it's submitted when you submit the form with the input field in it. Does someone knows how I can show the input field just as plain text with a placeholder?

Upvotes: 3

Views: 19498

Answers (5)

Ruddy
Ruddy

Reputation: 9923

I have made a little fiddle as I'm not 100% sure what you are asking for so I covered a few things. Some have been mentioned already as I was writing this but still lets have a look.

HTML:

So you can have two things here, textarea and input. We will start with inputs (although they are pretty much the same depending on what you want to do with them)

Input w/ no border:
<input class="noborder" />

Input w/ no border or outline:
<input class="nothing" />

Input w/ no border:
<input class="noborder" placeholder="Placeholder here" />

Moving on to textarea, as you can see we are using the same class's (view below the code) as there is no need to change any CSS for the textarea.

Textarea w/ no border:
<textarea class="noborder"></textarea>

Textarea w/ no border or outline:
<textarea class="nothing"></textarea>

This one uses readonly, it does exactly as it says. If you look at the demo I have linked at the bottom you will see it does not allow you to edit. I very rarely see it so not sure if there is something bad about it but none the less its an option. The second one like one of the inputs above has a placeholder.

Textarea w/ readonly:
<textarea class="nothing" readonly>Try edit</textarea>

Textarea w/ readonly:
<textarea class="nothing" placeholder="Placeholder here" readonly></textarea>

CSS:

.noborder {
    border: 0;
}
.nothing {
    border: 0;
    outline: none;
}

DEMO HERE

I hope this helps, good luck!

Upvotes: 6

Pir Abdul
Pir Abdul

Reputation: 2334

Editable input text field 

text[contenteditable] {
    border: 1px solid #000;
    padding: 10px;
}

text[contenteditable]:hover {
    background: #ff0;
}

Demo

Upvotes: 0

Dropout
Dropout

Reputation: 13866

Either use a textarea as other guys suggested:

<textarea style="border: none;">
lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
</textarea>

or if you don't want it editable, then just insert a hidden field:

lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
<input type="hidden">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</input>

Upvotes: 0

Sree
Sree

Reputation: 635

<input style="border:0" name="" placeholder="type here"/>

or 

<textarea rows="4" cols="50" style="border:0" placeholder="type here"></textarea>

Upvotes: 2

rajesh kakawat
rajesh kakawat

Reputation: 10896

use textarea instead and apply css to remove border

            <textarea style="border: none;"></textarea>

Upvotes: 0

Related Questions