Retrieve the present cursor location in a multiline textbox without the need to select any text

Is there a way to determine the current cursor position in a multi-line textbox without selecting any data within the textbox?

Answer №1

Check out this live demo of vanilla JavaScript DEMO to kickstart your project.

var inputBox = document.getElementById('inputField');

function trackMousePosition(event) {
  var xCoord = event.pageX - inputBox.offsetLeft,
      yCoord = event.pageY - inputBox.offsetTop;

  inputBox.value = xCoord + ", " + yCoord;
}

inputBox.addEventListener('mousemove', trackMousePosition, false);

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

Navigating from the Login Page to the Dashboard in Vue.js following successful token validation

I am facing an issue with the code that is supposed to redirect the User to the dashboard page if they have a token. Despite generating a JWT token from my Spring Boot backend and sending it to Vue for processing, the redirection is not working as expect ...

Using a string as a key for an object's property

function createObject(argName, argProperties){ var object = {}; object[argName] = argProperties; } I am calling my function in the following manner. createObject('name', objectProperties); The issue I am encountering is w ...

Selection Change Event for Dropdown Menu

Just starting to learn JavaScript and currently working with 3 select elements on a JSP page: <select id="railwayServiceList" name="railwayService_id" onchange="changeCompaniesCombo()"></select> <select id="companyList" name="company_i ...

Searching for multiple filtered items in Vue.js

When working with Vue js, searching through a list is straightforward. However, when dealing with a large dataset of 1000 records and needing to apply specific filters for user searches, I find myself at a loss. Is there a plugin or method that can help me ...

Unable to retrieve API data on local server port 5000. Utilizing a database sourced from a CSV file. Unexpected undefined promise response

I have been struggling for the past few days with a persistent issue. Seeking assistance. Currently working on a project involving a CSV database and creating my own API. It is a small React App Fullstack MERN setup. The specific challenge I am facing is ...

Express receiving undefined data in Ajax POST request

I'm currently facing an issue with sending data to be parsed. The client-side script I have is as follows: function addURL(link) { console.log("Adding url..."); $.ajax({ type: "POST", url: location.protocol + "/ ...

Hold on for the useState object to contain a value

Created a custom hook that fetches the user's location and determines the nearest marker on a map based on that information. Initially, it returns the default value of useState. The response looks like this: { coordinates: { lat: '', lng: ...

Accessing data attributes using jQuery and the class selector

I'm looking for a way to trigger an onClick event for an entire class of elements and access their individual data attributes within the function. Typically, I would use the following method: $(".classy").click(function(){ console.log("Replace th ...

Are you experiencing issues with modal contents extending beyond the modal on smaller screens?

I recently installed a modal plugin called blockUI for my image uploading needs. Although I have styled and positioned everything accordingly, I am facing an issue: Whenever I resize the browser screen, switch to my iPhone, or use another screen, some con ...

Adding an onClick event to a React MUI Fab: A Step-by-Step Guide

I'm attempting to incorporate the Floating Action Button from MUI5. Visit: https://mui.com/material-ui/react-floating-action-button/ for more details. Upon adding an onClick event to the button, no action is triggered. Below is my code snippet: <G ...

The controller in AngularJS fails to function properly after the initial page refresh

I am currently utilizing AngularJS in my hybrid Ionic application. Here is my controller: .controller('SubmitCtrl', function($scope) { console.log("It only works when the page is refreshed!"); }); The console.log function runs perfectly fine ...

Is there a way to navigate to a specific <li> element using scrolling?

Is there a way to direct a user to a URL and have it automatically scroll to a specific <li> element? For example, navigating to mysite.com/something.html#someItem should take the user directly to: Something here ...

"The 'BillInvoice' object must be assigned a primary key value before it is ready for this relationship" - Error Message

There is an issue in my Django project related to the creation of a BillInvoice and its associated BillLineItem instances. The error message I'm receiving states: "'BillInvoice' instance needs to have a primary key value before this re ...

I'm curious about the origin of this.on event handler. Is it part of a particular library or framework?

While casually perusing through the application.js file in the express source code, I stumbled upon this interesting piece of code. I'm curious about the origin of this '.on' event. Is it part of vanilla JavaScript or is it a feature provid ...

Adjust the size of the canvas element based on changes to its parent's dimensions

I am working with an application that includes a div containing a canvas element to display an image. Additionally, there is a sidebar that can be hidden with the click of a button, causing all other elements to resize and adjust to the remaining space. W ...

Determine in Node.js whether a variable is present in the request object for each page the user visits

Currently, my authentication system utilizes passportjs to define req.user when the user is logged in. As my website expands beyond its current 5 pages, I have been checking for the existence of req.user at the top of each route. Based on whether it exist ...

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

Recently, I installed the latest version of aws-amplify using npm. After running npm init with 'entryPoint.js' as the entrypoint file, I encountered an issue when pasting the following code at the top of entryPoint.js: import Amplify, {Auth} from ...

Ways to eliminate the excess margin of ng-container from the webpage

When controlling two mat tabs with a statement, I encountered an interesting issue. Both mat-tab elements contain a card-list and are controlled with a statement in ng-container. Strangely, on the first tab, the card has a slight margin from the top when I ...

Injecting services differently in specific scenarios in AngularJS

I have a unique angular service called $superService that I utilize across many of my directives and controllers. However, there is one specific directive where I want to implement the following behavior: If another directive utilizes $superService in its ...

Serve unique data to different bots and human visitors using express.js and node.js

I am looking for a method to differentiate between bot (such as google or bing) and human incoming requests, in order to provide tailored data to each. This could include serving json data for client-side javascript to build the site or preprocessed html. ...