CODEWITHSUNDEEP
csshtml
MmD
MmD

Reputation: 2154

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

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.

Upvotes: 2

Views: 1301

Answers (3)

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3501

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

Upvotes: 0

Harry
Harry

Reputation: 89760

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.

Upvotes: 3

AdityaSaxena
AdityaSaxena

Reputation: 2157

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

Upvotes: 0

Related Questions