Question

我想创建一个用于输入文本的地方，例如输入或带有textarea元素的div，但我不知道。

请告诉我。

此外，我希望这个div类似输入意味着点击它时光标变为Blinker。

Answer 1

以下是您正在寻找的内容。

<强> HTML

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

CSS （不是必需的，只是为了让DIV看起来像输入框）

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

Working Demo

注意：请参阅Aditya对浏览器兼容性的回答。如果您想支持该列表之外的任何浏览器，请不要使用它。

Answer 2

看看这是否是你想要的：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>

替代：

<div contentEditable></div>

Browser Compatibility

Answer 3

使用div的contentEditable="true"属性

像这样：

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

Demo Fiddle

但请注意，这是 HTML5 ，旧浏览器不支持

如何使用div元素创建输入或textarea（放置文本）

3 个答案: