Проверьте, является ли курсор концом входного текста

Question

То, что я пытаюсь сделать, это когда я помещаю адрес электронной почты как test@example.com, test@example.co.uk, et c, и я нажимаю на пробел, я хочу проверить, что если курсор находится в конце входной текст, прежде чем я мог добавить HTML в элемент.

if (selectionEndofText) {
  if (e.which == 32) {
    $('#oI').append('<div class="vR"><span class="vN" data-hovercard-name="'+name+'" data-hovercard-email="'+email+'" data-hovercard-owner-id="137"><div class="vT">'+name+'</div><div class="vM"></div></span><input name="to" type="hidden" value="<'+name+'>"></div>');
    $('.vR').insertBefore('#domodal_email_receipt');
    $('#domodal_email_receipt').val('');
  }
}

Полный код:

$(document).on('keydown', '#domodal_email_receipt', function(e) {
  var fullname = $(this).val();
  var name = fullname.split(' <');
  var selectionEndofText = $(this).val().length;
  var name = name[0];
  var email = '';

  if (fullname.indexOf('<') > -1) {
    email = fullname.split('<');
    email = email[1].replace('>', '');
  }

  alert("selectionEndofText................."+selectionEndofText);

  //if (!selectionEndofText)
    if (e.which == 32) {
      $('#oI').append('<div class="vR"><span class="vN" data-hovercard-name="'+name+'" data-hovercard-email="'+email+'" data-hovercard-owner-id="137"><div class="vT">'+name+'</div><div class="vM"></div></span><input name="to" type="hidden" value="<'+name+'>"></div>');
      $('.vR').insertBefore('#domodal_email_receipt');
      $('#domodal_email_receipt').val('');
    }
});

Answer 1

В дополнение к проверке ключевого слова пробела в операторе if вы также можете проверить позицию каретки с помощью .selectionStart, которая возвращает число. Таким образом, если текущая позиция равна длине, это означает, что она находится в конце ввода.

Чтобы очистить ввод, используйте setTimeOut, чтобы он работал последним. В противном случае внутри него будет пробел.

if (e.which == 32 && selectionEndofText === this.selectionStart) {
  $('#oI').append('<div class="vR"><span class="vN" data-hovercard-name="'+name+'" data-hovercard-email="'+email+'" data-hovercard-owner-id="137"><div class="vT">'+name+'</div><div class="vM"></div></span><input name="to" type="hidden" value="<'+name+'>"></div>');
  $('.vR').insertBefore('#domodal_email_receipt');

  setTimeout(function(){
    $('#domodal_email_receipt').val('');
  }, 0);

}