If the final element in a sequence is a span with the attribute contenteditable set to "false", then you should click on the div element that

When clicking on the div at the end of the text, the div gets focused but the caret doesn't appear (the caret appears in span.notContentEditable and is not visible) (this issue occurs in Firefox/Vivaldi/(Chrome on Ubuntu 19.10))

div[name="comment"] {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 100px;
  width: 100%;
  overflow: auto;
  padding: 5px;
  resize: both;
  margin-bottom: 5px;
}

.bold {
  font-weight: bold;
}
<div name="comment" contenteditable="true">
  <span class="bold" contenteditable="false">spantext</span>
</div>

Answer №1

It seems like your question is a bit unclear, but if you want to ensure that the span element stays in the left corner without being overlapped by other text, you can achieve this by following these steps:

(without changing your current markup:)

div[name="comment"] {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 100px;
  width: 100%;
  overflow: auto;
  padding: 5px;
  resize: both;
  margin-bottom: 5px;
  position: relative; /* added */
  padding-left: 60px;
}

.bold {
  font-weight: bold;
}
span {position: absolute; top: 5px; left: 0;}
<div name="comment" contenteditable="true">
  <span class="bold" contenteditable="false">spantext</span>
</div>

Alternatively, you can also use the text-indent property with a slight modification to your markup:

section {position: relative;}

div[name="comment"] {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 100px;
  width: 100%; 
  overflow: auto;
  padding: 5px;
  resize: both;
  margin-bottom: 5px;
  text-indent: 80px; /* space for the first line and on every NEW LINE */
}
.bold {
  font-weight: bold;
}
span {position: absolute; top: 5px; left: 0;}
<section>
  <span class="bold" contenteditable="false">spantext</span>
  <div name="comment" contenteditable="true"></div>
</section>

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

Can anyone guide me on creating a Mapbox map layer using React.js?

I'm currently in the process of creating a polygon layer on top of my Mapbox map using ReactMapboxGL. I have some Mapbox Javascript code that I need to convert into React.js format: map.on('load', function () { map.addLayer({ ...

Should you opt for returning [something] or (nothing) in Javascript with ExpressJS?

Is there a distinct contrast between returning something and returning nothing? Let's take a look at an example: user.save(function(err){ if ( err && err.code !== 11000 ) { console.log(err); console.log(err.code); res.send(&apo ...

Looking for a way to track the number of visits your website receives using Splunk?

Examples I've attempted: "url" | stats count index="indexname" "url" |stats count Is it necessary to establish logging on my webpage before I can access the hit count? ...

Is it truly necessary for Ajax actions to have their own unique URLs?

Occasionally, I come across the opinion that using the same URL for both non-Ajax and Ajax actions is not ideal. In my application, I have forms that are submitted with Ajax to enhance the user experience. However, these forms still function for users who ...

What steps can I take to ensure my customized tab component can successfully pass an index to its children and effectively hide panes?

I'm currently working on developing a custom Tabs component to enhance my knowledge of React, but I seem to have hit a roadblock. The structure involves three key components that draw inspiration from Material-UI tabs: Tabs, Tab, and TabPane. Tabs.j ...

Avoiding mocking a specific module with jest forever

Our codebase heavily relies on underscore in various parts, and I prefer to avoid mocking it. I'm aware that I can use jest.unmock('underscore'); in each test that utilizes underscore. Is there a method to unmock underscore across all tests ...

compressed vertical alignment bootstrap row

I am currently working with a code that displays articles within col-md-6 divs in a single row. Each article varies in height, and the visual aim is to create two columns of articles with similar total height. <div class="row"> <!-- FOR ARTIC ...

Navigate down to the lower section of the webpage once the fresh container has finished loading

Let's get straight to the point.. I have got 2 containers, each with a height of 100vh. The second container is supposed to be displayed when a button in the first container is clicked. However, the issue arises when the button click event function al ...

Guide to uploading a substantial file, sending it with ajax, showcasing the progression with a status bar, and consolidating the sections in php

I am looking to develop a client-side script using a form that allows users to upload large files (>2GB) to the server. Since the server cannot handle such massive files with a regular HTML upload, I need to split the file into multiple parts. Here is t ...

Permitting use of decimals within JQuery scripts

Below is the script that I am currently using: <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.1 ...

Error: This value is not a valid HTMLInputElement type (Google Maps)

When attempting to create a basic autocomplete field for Google Map places, I encountered the following error message despite having an HtmlInputElement as my field InvalidValueError: not an instance of HTMLInputElement Here is the HTML code: <inpu ...

Delay the HTTPs request until the password encryption is complete

Hey there! I'm working on a post request where I need to collect login data (name, email, password) from users, validate it, encrypt the password, and then store the data. However, I'm facing an issue with the encryption function taking time to r ...

The length returned by a Javascript object property is not accurate

When I clone an element dynamically using jQuery and then ask an object to return its length, it always returns a value of 1. You can view the issue in this fiddle: https://jsfiddle.net/gatzkerob/x5xd2x7q/3/ <span class="count">0</span> <b ...

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

Switching images through onmouseover, onmouseout, and onclick interactions

I have two images named img1 and img2. Here is my code: function roll(id, img_name, event_name, img_id) { var state ; if(event_name == 'mouseover') { state = false;rollover();} else if(event_name == 'mouseout') { ...

MongoDB Integration of Collections - No Data Population

Having trouble merging a client and an account collection. When I use res.send(client), only the account id's are returned. Unsure how to include account information in clients. Have seen one to many solutions, but struggling with this two-way relati ...

Pagination in DynamoDB: Moving forward and backward through your data

Currently, I am utilizing DynamoDB in combination with NodeJS to display a list of objects on the user interface. Given that DynamoDB can only process 1MB of data at a time, I have opted to implement pagination. This allows users to navigate between pages ...

Creating an array from objects without manual effort

Greetings everyone, currently I am structuring my array in the following manner: var piece1 = new DialoguePiece(null, questions[0], 0, 0, 4, 1); var piece2 = new DialoguePiece(null, questions[1], 1, 0, 2, 3); var piece3 = new DialoguePiece(scripts[1], nul ...

Choose the initial full text that corresponds with a portion of the text

I am currently working on a page with multiple <string> tags containing different strings, like 'Is this a String?  Yes'. My goal is to use JQuery to locate the first instance of 'Is this a String?  ' and extract either ...

What is the best way to check if a specific value is present in a JavaScript Array using a Function?

When a person uses an input field to type in a value, I have created the variable 'Ben' for that purpose. My goal is for a function to loop through the nameArray and return either true or false. Unfortunately, the script I've written isn& ...