如何使用div元素創建輸入或文本區域（輸入文本的位置）

我想創建一個用於鍵入文本的位置，如輸入或textarea與div元素，但我不知道。如何使用div元素創建輸入或文本區域（輸入文本的位置）

請告訴我。

我也想要這個div像輸入的意思，當點擊它光標是Blinker。

來源

2013-08-17 kasiri182

檢查這[**鏈路**]（http://jsfiddle.net/hari_shanx/Hp87R/）。這是你想要的嗎？ – Harry

是的，我的朋友該怎麼做？ – kasiri182

請參閱下面的答案。 – Harry

以下是您正在查找的內容。

HTML

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

CSS（並非必需，但只是爲了讓DIV的樣子輸入框）

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

Working Demo

注：參考Aditya對Browser Comp的回答atibility。如果你想支持列表之外的任何瀏覽器，請不要使用它。

來源

2013-08-17 05:17:25 Harry

非常感謝我的朋友!!!! – kasiri182

我的朋友最後questin ....我可以編輯這個div例如給風格？ – kasiri182

是的，你可以使用CSS來設計div的樣式（就像我在上面的例子中所做的那樣） – Harry

看看這是你想要什麼：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>

備選：