HTML 中 TextArea 内的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23951507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button inside TextArea in HTML
提问by saurabhsood91
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 的右上角对齐。我能够使用 CSS 定位来做到这一点。当我开始在 textarea 内输入时，文本出现在按钮下方。有没有办法让文本通常占据文本区域的整个宽度，但在到达按钮的边界时，会被换行到下一行？
回答by Aprillion
There is always an option to use contentEditableattribute on an inline element instead of <textarea>and put it next to a floating button.
始终可以选择在内联元素上使用contentEditable属性，而不是<textarea>将其放在浮动按钮旁边。
HTML:
HTML：
<div>
<button>press me</button>
<span contenteditable="true">editable</span>
</div>
CSS:
CSS：
div {border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;}
button {float: right;}
回答by Liam
Fake it. Wrap the textarea and button in a containing div and position the elements. then style the container div to look like the text area. here's a rough mockup http://jsfiddle.net/LEkAJ/
假装。将 textarea 和 button 包裹在包含 div 中并定位元素。然后将容器 div 的样式设置为类似于文本区域。这是一个粗略的模型http://jsfiddle.net/LEkAJ/
HTML
HTML
<div class="container">
<button>Button</button>
<textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</textarea>
</div>
CSS
CSS
.container {
position:relative;
width: 300px;
height: 100px;
border: 1px solid #ddd;
}
button {
position:absolute;
top: 3px;
right:3px;
width: 60px;
}
textarea {
position:relative;
border:none;
width:232px;
height: 95px;
resize: none
outline: none; /* add this to stop highlight on focus */
}
回答by Mayank Tripathi
I agree with @Aprillion. This approach will work. Look at this fiddle : http://jsfiddle.net/5pPRM/
我同意@Aprillion。这种方法会奏效。看看这个小提琴：http: //jsfiddle.net/5pPRM/
html:
html：
<p contenteditable="true">
<button onclick="alert($(this).parent().find('span').text());">hello</button>
<span>
This is a paragraph. It is editable. Try to change this text. This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.
</span>
</p>
css
css
p
{
position:relative;
}
button
{
position:relative;
float:right;
margin: 0 0 2% 0;
}
