非标准形状的输入字段

Question

我需要一个带有嵌入式按钮的文本区域字段，如下图所示：

 __________________________________
|Lorep ipsum lorep ipsum lorep ipsu|
|m lorep ipsum lorep ipsum lorep ip|
|sum lorep ipsum lorep ip _________|
|sum lorep ipsum lorep ip|   OK    |
|________________________|_________|

文本应围绕按钮排列，而不是隐藏在按钮下方。

我能想到的唯一选择是带有文本和用户操作处理程序的自定义 SVG 组件，但这似乎有点矫枉过正。

对完成此任务的简单（可能不完美）方法有何建议？

Answer 1

文本区域无法做到这一点。但是你可以做到 contenteditable div.

<div contenteditable="true"></div>

jsFiddle

Answer 2

我完全不喜欢这个客户端的东西，但 contenteditable 似乎是可能的。

.input {
  width: 300px;
}

.submit {
  border: 1px solid black;
  float: right;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class='input' contenteditable=true>
    <div type='button' class='submit' contenteditable=false>Save</div>
    The text should flow around the button, without being hidden under it.

The only option I could imagine is custom SVG component with text and user action handlers, but that seems to be a bit overkill.

Any suggestion on simple (may be not perfect) approach for this task?
  </div>

</body>
</html>

Answer 3

HTML

 <div>
  <textarea name="" id="txt" cols="30" rows="10"></textarea>
  <button>OK</button>
</div>

CSS

div{
  display:inline-block;
  position:relative;
}

button{
 position:absolute;
 bottom:10px;
 right:10px;
}

div{
    display:inline-block;
    position:relative;
}

button{
 position:absolute;
 bottom:10px;
 right:10px;
}

<div>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button>OK</button>
</div>

Answer 4

这完全不是您所要求的，但也许可以采取不同的方法。我将按钮放在 contenteditable div 的底部，只有当你悬停在情人部分时才会显示它。

正如我所说，这不是一个 'solution'，而是一个不同的问题处理方法。

.wrap {
  position: relative;
}
.text {
  height: 200px;
  width: 400px;
  background: rgba(0, 0, 0, 0.4);
  overflow:auto;
}
.bot {
  position: absolute;
  bottom: 0;
  height: 20px;
  width: 400px;
  padding-bottom: 5%;
}
button {
  position: absolute;
  height: 100%;
  width: 100px;
  right: 0;
  transition: all 0.8s;
  opacity: 0;
}
.bot:hover button {
  opacity: 1;
}

<div class="wrap">
  <div class="text" contenteditable="true">
    You can type in me! hover my lower section and you'll see the button!
  </div>
  <div class="bot">
    <button>OK</button>
  </div>
</div>

备注

这个 'solution' 可以整理一下，因为大多数 css 样式都是针对 'extra bits' 的，例如溢出和过渡。

非标准形状的输入字段

Not-standard shaped input field

html

css

css-shapes