Блог

Главная - Вопросы по программированию - Создайте текстовое поле с возможностью вложения нескольких файлов

Создайте текстовое поле с возможностью вложения нескольких файлов

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу создать текстовое поле, в котором требуется возможность добавления нескольких файлов. мы можем использовать ссылку на текстовое поле skype для отправки сообщения и добавления файлов.

Я создал некоторое текстовое поле, но я не могу создать текстовое поле с лучшим пользовательским интерфейсом.

один из примеров приведен ниже.

     <textarea #cName  class="cmnt-control" cols="50" rows="3"></textarea>

но я хочу создать текстовое поле, подобное skype, для справки ниже я добавил изображение.введите описание изображения здесь

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

Заранее спасибо.

Ответ №1:

Вам нужно обернуть textarea в div и добавить icon в div с помощью position:absolute; 

 .cmnt-control{
  position:relative;
}
.cmnt-control textarea{
  padding:10px 55px 10px 20px;
  width:calc(100% - 75px);
  resize: none;
}
.iconuser{
  position:absolute;
  top:10px;
  left:5px;
  cursor:pointer;
}
.icon{
  position:absolute;
  top:10px;
  right:0px;
  cursor:pointer;
}
.icon.icon2{
  right:30px;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="cmnt-control">
  <i class="fa fa-user iconuser"></i>
  <textarea #cName cols="50" rows="1"></textarea>
  <i class="fa fa-search icon"></i>
  <i class="fa fa-plus icon icon2"></i>
</div>