如何在角度文本区域内添加可点击按钮答案

【问题标题】：How to add a clickable button inside an angular textarea如何在角度文本区域内添加可点击按钮
【发布时间】：2020-03-12 17:58:41
【问题描述】：

我需要一个以角度浮动到文本区域右上角的按钮。

这是我有的，但它不起作用

<textarea matInput  matInput rows="15" cols="40" >
 <div (click)="formatXml()" class="xmlIcon">
     <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1" ></span>
   </div>           
 </textarea>

.xmlIcon{
    padding-right: 20px;  
    background-position: top right;
    background-repeat: no-repeat;
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

HTML

<div class="textarea-container">
 <textarea name="foo">Some content here...</textarea>
 <button>Menu</button>
</div>

css

.textarea-container {
  position: relative;
 }
.textarea-container textarea {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}
.textarea-container button {
 position: absolute;
 top: 0;
 right: 0;
}

直播example

【讨论】：

如果您调整（更小）文本区域的大小，按钮将位于文本区域之外。

【解决方案2】：

你可以用一个元素包裹文本区域和按钮。因此，您可以将按钮绝对定位在相对“外部元素”中。

.outer {
  position: relative;
  display: inline-block;
}

.xmlIcon {
  background-position: top right;
  background-repeat: no-repeat;
  background-color: red;
  position: absolute;
  top: 20px;
  right: 20px;
}

<div class="outer">
  <textarea matInput matInput rows="15" cols="40"></textarea>

  <div (click)="formatXml()" class="xmlIcon">
    <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1">button</span>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以使用 span 或任何具有 contenteditable 属性的支持元素来代替 textarea 。 read more

前-

<div class="editable-area-wrapper">
    <button>Click</button>
    <span contenteditable="true">I'm editable</span>
</div>

code

【讨论】：