HTML中TextArea内的按钮 | HTML中TextArea内的按钮

本文介绍了HTML中TextArea内的按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找一种结构，其中一个按钮与文本区域的右上角对齐。我能够使用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?

推荐答案

总是有一个使用属性，然后将其放在浮动按钮旁边。

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;}

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