Курсор переходит к концу поля, если вы пытаетесь редактировать

Question

Это происходит только в Safari.У меня есть простое текстовое поле, которое используется для электронной почты.Если вы вводите какой-либо текст, затем переместите курсор на несколько пробелов для редактирования и введите больше, как только вы начнете набирать его, курсор будет помещен в конец и добавит туда новые символы.Похоже, этот бит кода вызывает проблему.

function clearErrors() {
  var authError = document.getElementById("authError");
  var error = document.getElementById("error");

  if (authError !== null) {
    document.getElementById("authError").innerHTML = "";
  }

  if (error !== null) {
    document.getElementById("error").innerHTML = "";
  }


  function postOnReturn(e) {
    document.forms[0]['pf.username'].value = document.forms[0]
      ['pf.username'].value.trim();
    var keycode;

    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;

    if (keycode == 13) {
      if ($isCustomerInternal == 'false')
        if ($("#username").val().indexOf("@") === -1) {
          document.querySelector('.emailError').style.display = 'block';
          return;
        }
      else if ($("#username").val().indexOf("@") !== -1) {
        document.querySelector('.emailError').style.display = 'none';
      }
      end
      disableFields();
      document.forms[0].submit();
      return false;
    } else {
      return true;
    }
  }

<input id="username" name="pf.username" type="text" class="form-control 
    card-input" value="$username" autocorrect="off" autocapitalize="off" onKeyPress="clearErrors();return postOnReturn(event)" autofocus>

Answer 1

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

При возврате / вводе-нажатии в этом фрагменте появляется краткое сообщение с необработанной ссылкой, потому что не было общего кода '.emailError'. Это решило бы это. Если ваш код был верным, описанная вами проблема, вероятно, будет решена. Без кода я не смог воспроизвести вашу проблему, но я надеюсь, что это поможет.

function clearErrors() {
  var authError = document.getElementById("authError");
  var error = document.getElementById("error");

  if (authError !== null) {
    document.getElementById("authError").innerHTML = "";
  }

  if (error !== null) {
    document.getElementById("error").innerHTML = "";
  }
}

function postOnReturn(e) {
  var keycode;
  document.forms[0]['pf.username'].value = document.forms[0]
    ['pf.username'].value.trim();


  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    if ($isCustomerInternal == 'false') {
      if ($("#username").val().indexOf("@") === -1) {
        document.querySelector('.emailError').style.display = 'block';
        return;
      }
    } else if ($("#username").val().indexOf("@") !== -1) {
      document.querySelector('.emailError').style.display = 'none';
      end
      disableFields();
      document.forms[0].submit();
      return false;
    } else {
      return true;
    }
  }
}

<form>
  <input id="username" name="pf.username" type="text" class="form-control 
    card-input" value="$username" autocorrect="off" autocapitalize="off" onKeyPress="clearErrors();return postOnReturn(event)" autofocus>
</form>