HTML中TextArea内的按钮 [英] Button inside TextArea in HTML

问题描述

我正在寻找一种结构，其中一个按钮与文本区域的右上角对齐。我能够使用CSS定位做到这一点。当我开始在文本区域内键入内容时，该文本位于按钮下方。有没有一种方法可以使文本通常占据文本区域的整个宽度，但是在到达按钮的边界时，将其换行到下一行？

I am looking to create a structure, in which a button is aligned to the top right of a textarea. I was able to do that using CSS positioning. When I start typing inside the textarea, the text comes below the button. Is there a way so that the text normally occupies the full width of the text area, but on reaching the bounds of the button, gets wrapped to the next line?

推荐答案

总是有一个使用< textarea> 的内联元素上的> contentEditable 属性，然后将其放在浮动按钮旁边。

There is always an option to use contentEditable attribute on an inline element instead of <textarea> and put it next to a floating button.

HTML：

<div>
    <button>press me</button>
    <span contenteditable="true">editable</span>
</div>

CSS：

div {border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;}
button {float: right;}

jsFiddle

这篇关于HTML中TextArea内的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！