'Use a DIV as an input

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?

htmlinput


Solution 1:[1]

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;"/>

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[4]

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>

Solution 5:[5]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shashank
Solution 2 Community
Solution 3 Vinay Emmaadii
Solution 4
Solution 5 taeseong14

Related Questions