在令人满意的div

Question

为什么我要双按箭头键在跨度之间导航？如何解决？

您可以在下面的代码段中看到它

#editable {
  padding: 4px 12px;
  margin-top: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: none;
  transition: all .3s, height 0s;
}
#editable:hover {
  border-color: #40a9ff;
}
#editable:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.emoji {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("https://unpkg.com/emoji-datasource-emojione@4.0.2/img/emojione/sheets-256/64.png");
  background-size: 5200%;
  background-position: 27.451% 96.0784%;
  vertical-align: middle;
}

<div id="editable" contenteditable="true"><span class="emoji" contenteditable="false" unselectable="on"></span><span class="emoji" contenteditable="false" unselectable="on"></span><span class="emoji" contenteditable="false" unselectable="on"></span></div>