Use a DIV as an input

Question

Sorry if this question is very basic, but I'm trying to get back into programming and I'm stuck with this.

I want to have text input into a <div> in HTML, but I don't want the default chat box that comes with <input>. I just want it to directly print to a location within the <div>.

How can I do this?

Are you trying to do this? https://jsfiddle.net/uLkuvc4m/ – Adam Buchanan Smith Jun 06 '16 at 21:36 — Adam Buchanan Smith, Jun 06 '16 at 21:36

score 25 · Answer 1 · edited Jun 07 '16 at 05:33

25

You can use contenteditable attribute if you don't wanna submit its value to the server, just like this :

<div contenteditable="true">I'm Editable. Edit me!</div>

So that user can edit the text but it's not gonna be sent to the server and it's just a client side stuff.

But if you need to submit the value to the server you have to use TextArea or Input tag and remove the borders by CSS styles. Say :

<input id="myText" type="text" style="border:none; background: transparent; outline: 0;"/>

edited Jun 07 '16 at 05:33

Shashank

2,010
2
18
38

answered Jun 07 '16 at 05:18

akardon

43,164
4
34
42

1

the problem with input is that overrides a lot of style. You may need to add `font: inherit`, `color: inherit` etc... – Jaider Nov 25 '22 at 23:37

score 14 · Answer 2 · edited May 23 '17 at 12:31

14

Use a <div>

Make the div itself a text input (as you mentioned in the comments) by using contenteditable attribute:

<div contenteditable="true" style="outline:0px;">Hodor!</div>

JSFiddle

To get the value you can use jQuery $("div").text() or js textContent

To use the <div> inside a <form> add some js to wire it up. You can see an example here.

Use a <textarea>

You can also use a <textarea> if you hide some properties:

<textarea style="resize:none;overflow:auto;
        border:0px;outline:0px;background-color:transparent;">
    Hodor!
</textarea>

JSFiddle

To get the value you can use jQuery $("textarea").val() or js value

edited May 23 '17 at 12:31

Community

1
1

answered Jun 06 '16 at 22:51

Jaqen H'ghar

16,186
8
49
52

You are a lifesaver! Thank a lot. I have a design in which I had to edit the input box and also to highlight text upon '#' key down. I had been searching all kinds of hacks, and here it is, the solution simply sitting here in your answer. – nwillo Apr 30 '20 at 12:15

Pradeep Kumar · Answer 3 · 2021-10-22T11:30:56.597

1

The contenteditable attribute specifies whether the content of an element is editable or not. Demo

<div contenteditable="true">Use me as input box, but i am not a part of form submit to server</div>

edited Oct 22 '21 at 11:30

answered Oct 22 '21 at 11:25

Pradeep Kumar

41
4

score 0 · Answer 4 · answered Jun 06 '16 at 21:35

0

@Arkius have you tried using TextArea "http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea"

answered Jun 06 '16 at 21:35

Vinay Emmaadii

125
1
11

Textarea also has a box around it. I want the div itself be a text input – Arkius Azure Jun 06 '16 at 21:40

score 0 · Answer 5 · answered Apr 28 '22 at 02:36

0

use contenteditable to edit, use outline: 0 to remove outline

<div id="input" contenteditable style="outline: 0;">innerText</div>

answered Apr 28 '22 at 02:36

taeseong14

1
1

Use a DIV as an input

5 Answers5

Linked