The cursor is located on the right side instead of the usual left side

Why is the cursor positioned on the right side rather than the left side?

$('.legoact').focus();
When the cursor is positioned on the right side, it can be achieved using the following CSS properties:
.lego{
  background:#ddd;
  width:70%;
  margin:14px;
  position:relative;
}

.mark{
  position:absolute;
  right:-9px; top:-9px;
  width:14px; height:14px;
  border:2px solid white;
  border-radius:50%;
  background:red;
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class='lego legotxt legoact' contenteditable='true'>
  <div class='mark' id='mark' contenteditable='false'></div>
</div>

javascripthtmlcss

Answer №1

Using the .focus() method will position the cursor at the beginning of the content. In this case, the initial content is the #mark div, so the cursor is placed just before it. If you press the Delete key, you will see that it gets deleted:

$('.legoact').focus();
.lego{
background:#ddd;
width:70%;
margin:14px;
position:relative;
}

.mark{
position:absolute;
right:-9px; top:-9px;
width:14px; height:14px;
border:2px solid white;
border-radius:50%;
background:red;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='lego legotxt legoact' contenteditable='true'>
<div class='mark' id='mark' contenteditable='false'></div>
</div>

It might not be desirable to have this behavior. The mark should not be editable content. One way to resolve this issue is by using a wrapping div:

$('.input').focus();
.wrapper {
  background: #ddd;
  width: 70%;
  margin: 14px;
  position: relative;
}

.mark {
  position: absolute;
  right: -9px; top: -9px;
  width: 14px; height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class='input' contenteditable='true'></div>
  <div class='mark'></div>
</div>

Answer №2

Is the cursor positioned on the right side instead of the left?

When using contenteditable, keep in mind that it is intended for plain texts. If the parent element has contenteditable but the child element is an HTML element, the cursor's position will be determined by the structure of your markup/HTML.

For example, if you have the following structure with 2 children inside contenteditable, the cursor will be displayed near mark2.

<div class='lego legotxt legoact' contenteditable='true'>
    <div class='mark2'></div> <!-- Cursor will be displayed at the starting of this div -->
    <div class='mark1'></div>
</div>

How can you correct this issue?

You can find a solution here:

Follow the provided link for the complete solution.

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

To activate a function, simply click anywhere on the body: instruction

One of my latest projects involved creating a directive that allows users to click on a word and edit it in a text box. Once edited, clicking anywhere on the body should return the word back to its updated form. html <div markdown>bineesh</div& ...

javascripthtmlangularjs

passing parameters via routes

I've been working on passing parameters through the URL using this code, but it doesn't seem to be functioning properly. I suspect that the issue lies in the "get(\users:id)" part, but I'm unsure of the correct way to do it: $.ajax ...

javascriptnode.jsajaxexpress

Filter a Vue list based on a checkbox that can be either checked or unchecked

I am currently working on my Vue app and aiming to filter a list to display only entries that have been moderated. However, I am encountering an issue where when the checkbox is checked, I receive all the results that are true, and when the checkbox is un ...

javascriptvue.jsfilterdata-binding

Saving a complicated schema in Node using Mongoose fails to save or update when encountering an error

Greetings, I am facing challenges while trying to save a complex schema in MongoDB. const itemsSchema =new Schema({ cat: {type: String, required: true}, catItems: [{ items:{type: String}, isActive: {type: Boolean, default: true} }] }) ...

javascriptnode.jsmongodbmongoose

An issue arises when attempting to utilize the 'push()' method to append a string to a JSON array

I am looking to append strings to my JSON file structure shown below: { "items": [] } To achieve this, I have the requirement of using the following code: var items = require("../../config/item.json"); The approach I am taking is ...

javascriptnode.jsjson

The progress bar for Ng-file-upload does not function properly when used in conjunction with offline

Using ng-file-upload for file uploading in my home has been successful, as I am able to upload files without any issues. However, I encountered a problem where the progress bar only appears when offlinejs is disabled in the index.html file. It seems that ...

javascriptangularjsng-file-upload

Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

htmlcssnext.jsreact-springreact-three-fiber

jQuery id selector issue: not selecting elements properly

It seems like I am overlooking a very fundamental aspect here. Essentially, there are 2 div elements in the HTML markup. When one is clicked (#x), the other div element (#block1) gains a new class (.change), resulting in a change in its color. The issue ...

jqueryhtmlcssclick

What is the best way to retrieve the border-color inline style using jQuery?

I have a HTML tag like this. <span id="createOrderFormId:accountNo" style="border-color: red;"><</span> To retrieve the style value for the border-color property, I tried using the following jQuery code: $( document ).ready(function() { ...

javascriptjqueryhtmlcss

Issue with retrieving data from an external provider

I'm attempting to fetch data so I can tokenize my Credit Card, but I am required to use this address: this.state.data.CardRegistrationURL == "https://homologation-webpayment.payline.com/webpayment/getToken" Here is my fetch method: postI ...

javascriptreactjs

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Struggling to remove an event listener in Typescript due to a mismatch between the expected type EventListenerOrEventListenerObject and the actual type of FormEvent: private saveHighScore (event: React.FormEvent<HTMLInputElement>) { This is how I t ...

javascriptreactjstypescript

Having trouble with Vuex in Vue JS when trying to set up a modular store

Currently, I am in the process of building a web application using Vue along with Vuex. Despite being new to Vue, I am attempting to integrate Vuex into my Vue application. However, I am encountering an issue when using modularised Vuex. In my project, th ...

javascriptvue.jsvuexvuex-modules

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

I am facing an issue with a lengthy text inside a div with a class of "col-md-3". The text is so long that it appears to be overlapping with the content of another div. Adding spaces is not an option as it is an email address, and it displays fine on some ...

htmlcsstwitter-bootstrap

Building pagination functionality in AngularJS by sending parameters to an AJAX service: A step-by-step guide

I'm looking to learn how to implement pagination on a page with 10 records per page. Despite my efforts in searching online, I haven't been able to find any helpful resources explaining this concept. I would greatly appreciate a simple example or ...

htmlangularjsjsonpagination

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

I am currently in the process of developing a star rating system within Wordpress and am looking to store the rating data in the Wordpress database. To achieve this, I have saved the star rating PHP code as a template within my Wordpress theme folder. Belo ...

javascriptphphtmlcssajax

choose and adjust elements within a three-dimensional scene using three.js

I have a JSON file containing object data that I load into my scene using ObjectLoader. After adding the objects to the scene, I want to customize their textures by adding parameters like THREE.SmoothShading and an envMap. I know how to find a specific obj ...

javascriptselectthree.jskey-value

What could be causing the script to display the object's content inaccurately?

Below is the code for the client side: import {useEffect,useState} from 'react'; import io from 'socket.io-client'; import Peer from './Peer'; export default function TestMeeting(){ let peerName; const [peerList,setPee ...

javascriptreactjs

Vim: Turn off autocomplete when using insert mode key bindings

I've set up a mapping in insert mode to automatically indent brackets: inoremap [;<CR> [<CR>];<Esc>O<Tab> When I use it, the result looks like this (the pipe character represents the cursor): const a = [ | ]; Now, I want ...

javascriptvim

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

htmlcss

Is there a way to identify if a user originated from a Google ad and determine if this is their nth page during the session using JavaScript code?

Is there a way for me to execute specific logic when a user, who arrived at the page via a contextual advertisement, reaches a certain page during their session? How can I make this happen? ...

javascriptgoogle-analytics