Выделите элемент div в редактируемом вводе содержимого, как если бы это был текст - PullRequest
Новая
       8

Выделите элемент div в редактируемом вводе содержимого, как если бы это был текст

0 голосов
/ 01 июня 2018

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

.input {
  border: 1px solid black;
  width: 200px;
}

.emoji {
  width: 16px;
  height: 16px;
  background-size: contain;
  display: inline-block;
  background-image: url(https://twemoji.maxcdn.com/2/72x72/1f609.png);
}
<div contenteditable="true" class="input">
    <div class='emoji'/>
</div>

Обратите внимание, что в приведенной выше скрипке при попытке выделить эмодзи с помощью мыши, как если бы это был текст, неправильно выделяется эмодзи.

Я попробовал следующие 2 решения, но они не сработали.

1) Установка tab-index="-1" для div emoji и добавление следующего css для установки цвета фона, чтобы эмодзи выглядели выделенными 

.emoji {
    &:focus {
        background-color: #338fff;
    }
}

2) Использование ::selected css и установка цвета фона, чтобы он выглядел выделенным 

.emoji {
    &:selected {
        background-color: #338fff;
    }
}

Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Не совсем понятно, о чем вы спрашиваете.Как у вас работает следующее? 

.input {
  border: 1px solid black;
  height:27px;
  width: 200px;
}

.emoji {
  width:16px;
  height:16px;
  background-size: contain;
  margin:0 auto;
  margin-top:6px;
 

  display: block;
  background-image: url(https://twemoji.maxcdn.com/2/72x72/1f609.png);
}

#a1{
width:173px;
display:block;
float:right;
line-height:1.1;
}

#a2{
display:inline-block;
 background-color: #338fff;
 width:27px;
 height:27px;}
<div  class="input">
   <div id='a2'>
       <div class='emoji' ></div>
   </div>    
  <div id='a1' contenteditable="true">1234</div>
</div>
0 голосов
/ 01 июня 2018

Измените div emoji на тег изображения и свяжите его с прозрачным источником. 

#input {
  border: 1px solid black;
  width: 200px;
}

.emoji {
  width: 16px;
  height: 16px;
  background-size: contain;
  display: inline-block;
  background-image: url(https://twemoji.maxcdn.com/2/72x72/1f609.png);
}
<div contenteditable="true" id="input">
  <img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" class="emoji"/>
</div>
...