how to create input or textarea (place typing text) with div element

Question

I want to create one place for typing text like input or textarea with div element but I don't know about it.

Please tell me about it.

Also I want this div like input mean when click on it cursor to be Blinker.

Check this [**link**](http://jsfiddle.net/hari_shanx/Hp87R/). Is this what you want? — Harry, Aug 17 '13 at 05:16
How come you don't want to use the HTML input or textarea elements? They can be styled with css and can respond to javascript events. Plus, it's semantic and accessible. Just curious. — aek, Aug 17 '13 at 05:20

Harry · Accepted Answer · 2013-08-17T05:33:02.117

3

The below is what you are looking for.

HTML

<div id="editable" contentEditable="true"></div>

CSS (Not required, but just to make the DIV look like Input Box)

#editable{
    border: 1px solid black;
    height: 100px;
    width: 400px;
}

Working Demo

Note: Refer to Aditya's answer for Browser Compatibility. If you want to support any browser outside of that list, please do not use this.

edited Aug 17 '13 at 05:33

answered Aug 17 '13 at 05:17

Harry

87,580
25
202
214

yes, you can style the div using CSS (like I have done in the sample above) – Harry Aug 17 '13 at 05:38
so my friend can I when press enter in this div change event? – MmD Aug 17 '13 at 05:41
@mamal10: You would find this SO post useful - http://stackoverflow.com/questions/1391278/contenteditable-change-events – Harry Aug 17 '13 at 05:46

score 0 · Answer 2 · answered Aug 17 '13 at 05:17

See if this is what you want : http://jsbin.com/eqEPAci/1/edit

CSS:

.styles{
        height:30px;
    width:286px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #5E5E5E;
    padding:0px 5px;
        background-color: #000000;
        color:#BFBFBF;
        outline: none;
        input-align: center;
}

.abs-centered {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}

#actual-input{
  height:26px;
  padding:0px;
  width:100%;
  color:#fff;
  background-color:transparent;
  border:0px;
  outline-style:none;
}

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body bgcolor="#25383C">
  <div class="styles abs-centered">
    <input id="actual-input" name="name" type="password" placeholder="Password" autocomplete="off"/>
  </div>
</body>
</html>

Alternative:

<div contentEditable></div>

Browser Compatibility

score 0 · Answer 3 · edited May 23 '14 at 23:34

0

use contentEditable="true" attribute for div

like this :

<div contentEditable="true"></div>

Demo Fiddle

but be careful that this is HTML5 and old browsers don't support it

edited May 23 '14 at 23:34

animuson

53,861
28
137
147

answered Aug 17 '13 at 05:17

Mohammad Masoudian

3,483
7
27
45

how to create input or textarea (place typing text) with div element

3 Answers3