Tracking the cursor location within a modifiable div while using a :before pseudo-class

Within my editable div, I have incorporated the use of :before and :after CSS pseudo-elements.

The :before pseudo-element displays a prompt inside the div,
while the :after pseudo-element acts as a placeholder

When a user clicks on an empty div, the cursor is placed before the "prompt" text.
As soon as the user starts typing, the :after content vanishes, ensuring the cursor is correctly positioned.

I am seeking a method to automatically position the cursor after the content when selecting an empty div. Interestingly, if there is any existing text in the div and it is selected, the cursor goes to the end as desired.

I would greatly appreciate any thoughts or assistance with this.

div[data-prompt][contenteditable=true]:before {
  content: attr(data-prompt);
  font-family: 'Open Sans', sans-serif;
  color: black;
}

div[data-placeholder]:empty:after {
  content: attr(data-placeholder);
  color: black;
}
<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>

Cursor positioning behavior when an empty div is selected

https://i.sstatic.net/dEIkN.png

Please note that the length of the "prompt" may vary.

htmlcss

Answer №1

To control the cursor position, you can utilize text-indent and translation within the div when it is :empty

div[data-prompt][contenteditable=true]:before {
  content: attr(data-prompt);
  font-family: 'Open Sans', sans-serif;
  color: black;
}

div[data-placeholder]:empty:after {
  content: attr(data-placeholder);
  color: black;
  /* added */
  display: inline-block;
  transform: translateX(-28px);
  text-indent: 0;
  /**/
}

/* added */
div[data-placeholder]:empty {
  text-indent: 38px;
}
div[data-prompt][contenteditable=true]:empty:before {
  display: inline-block;
  transform: translateX(-37px);
  text-indent: 0;
}
/**/

div[data-prompt][contenteditable=true] {
  border: 1px solid;
}
<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>

To have a more general approach, CSS variables can be used:

div[data-prompt][contenteditable=true]:before {
  content: attr(data-prompt);
  font-family: 'Open Sans', sans-serif;
  color: black;
}

div[data-placeholder]:empty:after {
  content: attr(data-placeholder);
  color: black;
  /* added */
  display: inline-block;
  transform: translateX(calc(10px - var(--d)));
  text-indent: 0;
  /**/
}

/* added */
div[data-placeholder]:empty {
  text-indent: var(--d);
}
div[data-prompt][contenteditable=true]:empty:before {
  display: inline-block;
  transform: translateX(calc(1px - var(--d)));
  text-indent: 0;
}
/**/

div[data-prompt][contenteditable=true] {
  border: 1px solid;

}
<div style="--d:37px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>


<div style="--d:64px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will not " data-placeholder="..."></div>

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

Issue with navigational button layout

I am facing an issue while designing my navigation menu with 4 circular items spaced about 20 px apart on the top right of the screen. I have managed to style each nav item as a circle, but when I try to position them in the upper right corner, only the 4t ...

htmlcssnavigation

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

My backend markdown compiler generates the HTML content, and I need Angular to retrieve data from the server, dynamically render the content, and display it. An example of the mock markdown content is: <h1 id="test1">Test 1<a href="#test1" title ...

javascripthtmlangulartypescriptanchor

Choose to show a blank option and then retain the selected value upon submission

Is there a way to have the initial selection in a dropdown list be blank and selected by default, but still preserve the selected value after submitting the form? For example: <form action="" method="post" /> <SELECT NAME="whatever" id="whatever ...

phphtmlhtml-select

Ways to add margin-top to a card element without affecting the entire container-fluid

I'm attempting to change the background image of this container, but when I add margin-top to the card element, it shifts everything over the picture. Below is my Bootstrap4 code: #card.container-fluid { background-image: url("../images/picture2. ...

htmlcssbootstrap-4

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Click here I have a simple file structure where index.html, script.js, and login.js are all in the same root folder without any subfolders. The issue I'm facing is that although the connection to the database works fine, there seems to be a problem wi ...

javascripthtmlmysqlnode.jsforms

Disregard the Margin of Ancestor Elements

I'm attempting to make an image span the full width of a parent element, but the parent element has a margin of 10px. This means that when I apply #parent img { position: absolute; top:0; left:0; height: auto; width: 100% } It on ...

htmlcss

Leveraging dual style.bind declarations in Aurelia

I'm facing an issue with utilizing two style.bind in Aurelia as it doesn't seem to be functioning properly. Alternatively, I could attempt using just one style.bind and applying the desired styles, but I am unsure of how to proceed. Here is the ...

cssaurelia

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

When the parent element is centered, align the children to the left

Can children be aligned to the left when the parent is aligned to the center? I have a list of elements where the parent block should be centered, but the children need to align to the left. https://i.sstatic.net/ixRxQ.jpg Now I found a solution to alig ...

css

CSS method for creating designs surrounding text

I'm working on styling a section of a website with a pattern running alongside certain pieces of text. I've included a screenshot taken from the PSD file to illustrate the issue I'm facing, with red arrows indicating the areas that are posin ...

htmlcss

Utilizing SASS with Bootstrap 4 media breakpoints: A comprehensive guide

According to the information provided on the official Bootstrap website: Bootstrap writes its source CSS in Sass, making all media queries available via Sass mixins: @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @in ...

htmlcsstwitter-bootstrapsassbootstrap-4

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Next.js Version 13.2.3 In Next.js, it is advised not to use the table element. "use client"; export default function index() { return ( <table> <tr> <th>Company</th> ...

htmlreactjsnext.jshtml-tableserver-side-rendering

How to pass extra value in IE7 and IE8 when selecting an option from a 'select' form

When passing expiry parameters using a form 'select' option, everything seems to be working fine in most browsers except for IE7 and IE8. Upon inspecting the form snippet and the array received from the card processor logs, it was noticed that an ...

jqueryhtmlformsinternet-explorer

Is there a way to display the form values on the table once it has been submitted?

I'm struggling with my form input not showing up under the table headings after submission. I've reviewed the code multiple times, but can't figure out what's causing the issue. If you have any suggestions on how to write the code more ...

javascripthtmljquerycss

Are Half of the <a> Links Invisible due to a Possible Issue with Position:Fixed?

There seems to be an issue with some of the links in my navigation bar not working properly. It appears that they are being covered by an iframe element, preventing them from changing color when clicked. Although the iframe element is visibly below the na ...

csshyperlink

"One specific div in Safari is having trouble with the external stylesheet, while the other divs are functioning properly- any

I'm facing a puzzling issue that has me stumped. I'm working on a website and have a simple footer with a link at the bottom: <div id="sitefooter"> <a href="#">This is the link</a> </div> My stylesheet includes styling f ...

csssafaristylesheetstyles

Utilization of Bootstrap's .container class in various scenarios

As I delve into Bootstrap, the usage of the .container class is provoking some confusion. Most tutorials suggest a structure like this: -.container --.row ---.col- ---.col- However, I came across a different approach in a W3schools example: W3Schools - ...

htmlcsstwitter-bootstrap

I am struggling to create a responsive form using Bootstrap

I am facing an issue with my two forms that I want to have a fixed full-screen size. Despite trying different bootstrap options, they are not responsive at lower resolutions. What should I do to make them responsive? Here is the code: <form action=&a ...

htmlcsstwitter-bootstrapbootstrap-5

s3 key not found, The specified key does not exist. previewing file from a web link

After utilizing paperclip and s3, I successfully uploaded a word document and now I am seeking the ability to preview it directly from the database using an iframe. https://i.stack.imgur.com/ceCPu.png <iframe src="<%= agreement.document.url(:smal ...

htmlruby-on-railsamazon-web-servicesiframeamazon-s3

"Term" symbols from the Unicode Range

I have been curious about how PCRE detects word characters from any language. In my testing, I used this string: "間違つ" The PHP file is UTF-8 encoded and properly tagged with Charset=UTF-8 in the Content type tag. <?php $string="&b ...

phphtmlregexunicodeutf-8