Почему, когда я пытался перемещаться между «элементом», когда я нажимаю «стрелку влево» на клавиатуре, все в порядке, и курсор проходит через «элемент», но когда я пытался нажать «стрелку вправо» на клавиатуре, это не работает? Каретка по-прежнему на предыдущей позиции и не двигается.
Когда я ранее нажимаю клавишу Ctrl, а затем «стрелку вправо», она проходит через двойной «элемент». И это единственный способ решить проблему хотя бы как-то.
Я также пробовал что-то вроде: "window.getSelection (). GetRangeAt (0);"
Но здесь нет ничего полезного информация, возвращаемая этим методом. Может быть, вы знаете какой-нибудь другой метод или свойство Window, которые помогут.
$('#main').on('input', function() {
$(this).contents().each(function(){
if (this.nodeType != 3
&& !$(this).next('i.wrapper').length
&& this.nodeName != "I") {
$("<i class='wrapper'/>").insertAfter(this);
}
});
}).trigger('input');
div.main {
width: 400px;
height: 250px;
border: solid 1px black;
}
div.main span {
width:40px;
background-color: red;
border-radius: 5px;
color: white;
cursor: pointer;
}
i.wrapper {
font-style: normal;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main" class="main" contenteditable="true"><span contenteditable="false"> item </span><span contenteditable="false"> item </span><span contenteditable="false"> item </span><span contenteditable="false"> item </span></div>
UPD. У меня есть элемент contenteditable, куда я добавляю текст и нередактируемые элементы. Мне нужно иметь возможность перемещаться между этими нередактируемыми элементами с помощью клавиатуры.