Как добавить кнопку в textarea

168

14 января 2019, 11:30

У меня есть простая формочка для ввода текста.Хочу добавить кнопку для удаления текста в правом углу формы, что-то наподобии этого

Пока получилось только так

.btn-default { 
  background: #DC50FF; 
  color: #ffffff; 
} 
 
.form-control { 
  width: 30%; 
} 
 
.clear { 
  position: relative; 
  right: 28px; 
  vertical-align: top; 
  opacity: 0.6; 
}

<label class="btn btn-default btn-lg"> 
 Browse <input #file type="file" hidden accept=".pptx"> 
 </label><br><br> 
<p>Description of presentation :</p> 
 
<form> 
  <div> 
    <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> 
    <button class="clear" (click)="clear()">&#215;</button> 
  </div> 
  <br> 
</form> 
<button (click)="upload(file.files)" class="btn btn-primary"> Upload</button> 
<br />

Answer 1

Если позволяют соседние элементы справа от textarea, то без создания дополнительных обёрток и с минимумом кода:

button { 
  position: relative; 
  right: 28px; 
  vertical-align: top; 
  opacity:0.6; 
}

<textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 ">Измените размер. Нажмите кнопку.</textarea> 
<button onclick="this.previousElementSibling.value = '';">&#215;</button>

UPD

При position: relative, отступ неизбежен. Но, метода проще, чем ограничить изменение размера, я не вижу:

.btn-default { 
  background: #DC50FF; 
  color: #ffffff; 
} 
 
.form-control { 
  min-height: 2em; 
  width: 30%; 
  min-width: 18px; 
  max-width: calc(100% - 35px); 
} 
 
.clear { 
  position: relative; 
  right: 28px; 
  vertical-align: top; 
  opacity: 0.6; 
}

<label class="btn btn-default btn-lg"> 
 Browse <input #file type="file" hidden accept=".pptx"> 
</label><br><br> 
<p>Description of presentation :</p> 
 
<form> 
  <div> 
    <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> 
    <button class="clear" (click)="clear()">&#215;</button> 
  </div> 
  <br> 
</form> 
<button (click)="upload(file.files)" class="btn btn-primary"> Upload</button> 
<br />

Эксперименты с position: absolute (из прочих ответов) показали, что без дополнительной разметки, кнопка также скачет, при появлении полосы прокрутки у body.

Answer 2

Оберните пару дивом, спозиционируйте кнопку абсолютно:

div { 
  position: relative; 
  display: flex; 
  width: 30%; 
} 
 
textarea { 
  height: 100px; 
  width: 100%; 
  max-width: 100%; 
  min-width: 100%; 
} 
 
button { 
  position: absolute; 
  top: 0; 
  right: 0; 
  height: 20px; 
  width: 20px; 
}

<form> 
  <div> 
    <textarea name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> 
    <button>X</button> 
  </div> 
  <br> 
</form>

Answer 3

<form> 
<div> 
<textarea></textarea> 
<button style="position: absolute; margin-left: -35px;">X</button> 
</div> 
<br> 
</form>

Answer 4

textarea { 
  display:flex; 
} 
 
.clear { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  opacity: 0.2; 
} 
 
.cont { 
  display: inline-block; 
  position: relative; 
}

<form> 
  <div class="cont"> 
    <button class="clear" (click)="clear()">&#215;</button> 
<textarea  name="fileDescription" [(ngModel)]="desc" class="form-control" rows="2 "></textarea> 
  </div> 
  <br> 
</form>

Вот нашел приближенное,к тому что хотел получить.

Answer 5

Для того что бы ваша разметка поддавалась редактированию нужно придерживаться некоторых правил.

Во первых, Вы не корректно используете тег <br>. Ознакомьтесь с описанием тут и посмотрите правильное и неправильно использование тут

Во вторых, Вы используете атрибут rows="2" для задания высоты textarea, но его ширину устанавливаете в CSS при помощи:

.form-control {
  width: 30%;
}

Выберете один стиль оформления для тестового поля что бы не путаться и Ваш код оставался поддерживаемым.

В третьих, Вы не корректно используете свойство position. В этом примере хорошо описана разница между relative и absolute.

В четвёртых, ознакомьтесь с свойством box-sizing, оно поможет исправить ситуацию с тем что у кнопки будет отступ от края тестового поля.

Рабочий пример с учётом рекомендаций:

.btn-default { 
  background: #DC50FF; 
  color: #ffffff; 
} 
 
.textarea-wrapper { 
  position: relative; 
  width: 30%; 
} 
 
.textarea-wrapper textarea.form-control { 
  display: block; 
  width: 100%; 
  box-sizing: border-box; 
} 
 
.textarea-wrapper .textarea-clear { 
  position: absolute; 
  right: 0; 
  top: 0; 
  opacity: 0.6; 
}

<label class="btn btn-default btn-lg"> 
        Browse <input #file type="file" hidden accept=".pptx"> 
    </label> 
<p>Description of presentation :</p> 
 
<form> 
  <div class="textarea-wrapper"> 
    <textarea name="fileDescription" [(ngModel)]="desc" class="form-control"></textarea> 
    <button class="textarea-clear" (click)="clear()">&#215;</button> 
  </div> 
</form> 
<button (click)="upload(file.files)" class="btn btn-primary"> Upload</button>

Answer 6

<button style="position: absolute;margin: 1px -30px;">X</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

БЭМ правильно ли внутрь блока вставлять блок в названии которого нет упоминания о родителе

Собственно вопрос - правильно ли внутрь блока вставлять блок в названии которого нет упоминания о родителе, ну, к примеру, есть код:

205

jQuery

Tултип с tooltipster плагин на карте изображения с panzoom

Есть простая карта изображения с тултипом при клике на area и возможностью увеличения\уменьшения этой карты:

188

jQuery

Как заставить корректно работать jquery.formstyler и bootstrap popover?

День добрый! Стоит задача применить плагин jqueryformstyler к select'у, который находится в html контенте, загружаемом в popover

195

jQuery

Выбрать и скрыть value в select по условиям

У меня есть следующий скриптПри выборе connectid value="1 в presentId должн показываться только value="1" При выборе connectid value="7 в presentId должн показываться...

192