When trying to make edits, the cursor automatically jumps to the end of the field

In Safari, there is a strange issue occurring with a text field used for emails. When entering text and trying to edit by moving the cursor, new characters are automatically placed at the end of the text. It seems that the problematic code causing this behavior is the following:

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

Your code contains several syntax errors, such as missing opening/closing brackets in if statements and a missing closing bracket in one of the functions. To avoid such errors, consider using an online syntax-checker to verify your JavaScript syntax. In the code snippet provided, pressing 'return' or enter might trigger an uncaught reference error due to the absence of the '.emailError' code. Including this code would likely resolve the issue you mentioned. Unfortunately, without more context, I couldn't reproduce the exact problem you're facing, but I hope this information is helpful.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error occurs when attempting to use Socket.io without explicitly returning the index.html file

I want to implement WebSockets without needing to return the index.html file. As someone new to Socket.IO, here's what I've attempted: First, I installed Socket.IO using npm: npm install socket.io --save Then, I created a file called index.js ...

Error importing React Icons with the specific icon FiMoreHorizontal

Currently following a guide to create a Twitter-like application and I need to add the following imports: import { FiMoreHorizontal } from 'react-icons/fi' 2.3K (gzipped: 1K) import { VscTwitter } from 'react-icons/vsc' 3.1K (gzipped: ...

Navigating to a specific div within a container with vertical overflow in an Angular application

I am working on an angular application where I have a left column with a scrollable div that has overflow-y: auto;, and a right column with bookmark links that jump to sections within the scrollable container. I am currently facing two challenges: 1 - Co ...

Utilizing Google Fonts offline without the need for an API

Instead of relying on Google Fonts API to access a variety of fonts for my website, I took matters into my own hands. I downloaded a snapshot of fonts from this GitHub repository: https://github.com/google/fonts and transferred them to my web directory. T ...

What is the best way to extract data from a series of nested JSON objects and insert it into a text field for editing?

I am facing a challenge with appending a group of nested JSON objects to a text field without hard coding multiple fields. Although I have used the .map functionality before, I am struggling to make it work in this specific scenario. const [questions, setQ ...

Is there a way to automatically redirect the server URL when a file is modified?

I am currently experimenting with a function that is supposed to only display a message in the console without redirecting the actual URL of my server when a file is changed. watcher.add("/home/diegonode/Desktop/ExpressCart-master/routes/2.mk"); watche ...

"Troubleshooting the Issue of Unsuccessful Retrieval of Added Row Text Value

Struggling with retrieving text values from dynamically added rows? The first row data converts fine to PDF, but how do you push data through AngularJS from dynamic rows? Appreciate any help. See my code snippet below: <table id='myTable&a ...

Trouble with Google Web Fonts appearing incorrectly on Chrome for Windows 7

Currently facing an issue with a website I am developing using Wordpress: In Chrome, running on Windows 7, the body text on the homepage is supposed to be displayed as a Google Font. However, for some reason, the last line of the text is appearing in the d ...

What is the best way to trigger an event using vue-chartjs?

I am using vue js to display a graph with chartjs. I have implemented an onClick function on the graph to emit an event in the parent component and retrieve data. However, the event is not working as expected. Can you help me identify the issue? Component ...

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

Executing a function every time a prop is updated within the component

I have a prop named transcript in one of my components. Whenever I speak a voice intent, it gets updated. I want to execute a function every time the transcript changes and pass the transcript as an argument. In this code snippet, I attempted to use an On ...

Animating a progress bar with JQuery

Having issues with displaying a progress bar using jquery and javascript, as it is not appearing on the page. var show_time = Math.floor(Math.random() * 10000) + 5000; setTimeout(function() { $("#progress").hide() }, show_time); var myCountdown = $( ...

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

The situation: On my simple HTML website, I have a group of images placed side by side. Each image is connected to a specific article, and when you hover over the image, a detailed description of the linked article pops up in the center of the page. The o ...

Working on rectifying the Chat Engine API code that was causing a 403 Status Code to be generated

Encountering a status code 403 while attempting to create a chat engine IO page, even though all authentication headers are believed to be accurate. Double-checked for typos but still unable to identify the issue. Despite console logging the user correctly ...

Exploring the functionality of $timeout in AngularJS

Can you explain the functionality of $timeout in AngularJS and how it sets itself apart from traditional setTimeout()? ...

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

The Mongoose function findbyIdAndRemove is currently not working properly when triggered on the client-side

I have a specific route in my app that uses the mongoose method findByIdAndRemove. Strangely, when I test this route using postman, it successfully deletes documents from my database. However, when I try to call this method from my client-side JavaScript f ...

Develop a JavaScript function to declare variables

I am currently attempting to develop a small memory game where the time is multiplied by the number of moves made by the player. Upon completion of all pairs, a JavaScript function is executed: function finish() { stopCount(); var cnt1 = $("#cou ...

Flexslider optimized for mobile devices

I am currently using the Sparkling theme on a Wordpress website. This particular theme utilizes Flexslider within a div at the top of the page. Each slide featured in the slider includes an image, as well as a div containing a post title and excerpt. The ...

I'm experiencing an issue with Bootstrap 5 where the code runs fine on codeply but not on my local machine

I'm attempting to replicate the scrollspy example found on the Bootstrap website. You can see my attempt here: . Feel free to inspect the code. While the navigation links function correctly, I've noticed that according to Bootstrap's docum ...