Use of carrots within a contenteditable div

Whenever I click inside this div for the first time, my cursor goes up. But when I start typing, the text appears correctly in the middle of the div. How can I resolve this issue with the placeholder not aligning properly? I want the cursor to be positioned in the middle initially, similar to how text is displayed as you type.

Here is a demo http://jsfiddle.net/0gr09835/2/, along with the relevant snippet:

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block; /* For Firefox */
}
[contenteditable=true]:empty:focus:before {
    content: "";
}

Below is my screenshot: https://i.sstatic.net/Cbt6f.png

This behavior works fine in Chrome, but not in Firefox.

htmlcss

Answer №1

It appears that there is an issue with an old bug in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=904846).

To potentially resolve this problem, one workaround could be to substitute content: '' with display: none in 

[contenteditable=true]:empty:focus:before
.

div.msg {
    font-size: 16px;
    float: left;
    width: calc(100% - 80px);
    height: 64px;
    line-height: 64px;
    padding: 0px 10px;
    color: #1a1a1a;
    border: 0;
    background-color: transparent;
    outline: none;
    font-weight: 400;
    border: 1px solid #000;
    margin-top: 25px;
}

[contenteditable=true]:empty:before{
    content: attr(placeholder);
    display: block; /* For Firefox */
}

[contenteditable=true]:empty:focus:before {
    display: none;
}
<div class="msg" name="msg" placeholder="Write message..." contenteditable="true"></div>

A similar issue was also discussed in Firefox sets wrong caret position contentEditable on focus.

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

Passing the value of each table row using Ajax

On my webpage, I have a list of orders displayed. I'm facing an issue where the value of each row in the table is not being passed correctly to my controller and database when a user clicks on a button - it always shows null. Can someone please assist ...

javascriptjqueryhtmlajaxasp.net-mvc

Troubleshooting: Node.js not receiving data from HTML form

I am currently facing an issue with my HTML form and Node.js server. Despite implementing a form that is supposed to send data to the server, no information is being transferred. The form successfully makes a request, but it fails to send any form data alo ...

javascripthtmlnode.jsexpress

The issue of the v-list-item-title text color remaining static in v-navigation-drawer when active has been noted

I'm currently working on developing an application using the Vuetify framework. I've encountered an issue while trying to modify the CSS properties of v-list-item. The main problem arises when an item is active, as everything seems to work fine ...

cssvue.jscss-selectorsvuetify.jsvue-router

Arranging divs in succession using CSS positioning

Struggling to design a landing page with a fixed background slideshow followed by a div explaining the website's purpose, I encountered an issue where the two divs overlap due to the current HTML and CSS code. Even after experimenting with different ...

htmlcssreactjsposition

Javascript code that fires when all elements are loaded

Incorporating two external HTML pages using the following code: <div id="header-div"></div> <div id="footer-div"></div> This is what my JavaScript file consists of: $(function () { $("#header-div").load("/AfekDent/header.ht ...

javascriptjqueryhtml

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

When using elements like yii CHtml::link, what are the recommended practices? I'm working on a button that needs to include an icon, text, respond to hover events, and be wide. Are there any benefits to using CHtml instead of a regular tag that can e ...

jqueryhtmlcssyiiyii-chtml

Create a series of vertical lines using jQuery

I'm dealing with a JSON data set that I want to use to generate a grid. In addition to the grid, I also need to display vertical lines above it based on certain values: var arr = []; arr= [ {"Measure":"Air Pollution","Rank":"1","Value":"15.5"}, ...

javascriptjquerycsskendo-ui

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Is there a way to search for a specific part of my input using JavaScript/jQuery? I've tried two different methods, but neither yielded any results. <script type="text/javascript> $("#button").click(function () { $("#DivToToggle").toggle(); ...

javascriptjqueryhtmlweb

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

My extensive HTML file contains Javascript, jQuery, c3.js, style.css, and normalize.css. I am wondering if I can include this file as a static HTML page within Wordpress. Say, for instance, the file is called calculator.html, and I want it to be accessib ...

javascriptjqueryhtmlcsswordpress

Specify the location of the resize button (corner)

Scenario : At the bottom of the page, there is a resizable textarea, However, having the resize button at the bottom-right corner does not provide the best user experience (try it out), Issue : I am wondering if there is a way to move the resize butt ...

javascripthtmlcssfrontendresizable

Creating a bottom bar using React and Material UI

I'm currently working on implementing a footer that will be displayed on every page of my Next.js application. To style this, I am utilizing Material UI. The following component is responsible for defining the layout across all pages of the app: impo ...

cssreactjsmaterial-ui

SASS : Loop not producing the most efficient CSS output

Is there a way to optimize CSS generation using a @for loop in SASS? An example speaks louder than words: Here is my SASS code: @for $i from 1 through 2 { .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} { background: red; ...

cssloopssass

The functionality of Flatbutton(Input handler) appears to be malfunctioning

I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...

javascripthtmlreactjsmaterial-designmaterial-ui

Creating a Visual Balance with CSS Image Margins

div#columncontents { background: black; } img.colimg03 { position: relative; right: -70px; } img.colimg02 { position: relative; right: -40px; } <div id="columncontents"> <div class="columnimage"> <img class="colimg01" src=" ...

htmlcss

Ways to eliminate the lower boundary of Input text

Currently, I am working on a project using Angular2 with Materialize. I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field. You can view the red line in t ...

javascriptcssangularsassstyles

Implementing customized line breaks in PHP using custom fields

My knowledge of PHP is quite limited, so I prefer to seek advice from experts before attempting anything I find online. I recently installed a customized billing field plugin in order to collect additional billing information during the checkout process. ...

phpcssmysqlhtml-helperbreak

PHP allows for easy looping through an array based on certain conditions. By incorporating

Can anyone assist me in creating an HTML div using an array loop? Here is how my array looks: $myarray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]; This is the structure of my PHP file: <?php foreach ($myarray as $arr) { // ...

phphtmlarraysloopsconditional-statements

Steps for ensuring that a script is loaded after the page has fully loaded

Is there a way to make the progress bar begin its loading animation after the `onload` loader animation has completed? Check out this example of normal progress bar animations: JSFiddle Alternatively, here is an example with the `onload` loader added: JSF ...

javascripthtmljquerycss

What is the best way to adjust the spacing between grid items in Material UI?

Is there a way to automatically adjust the spacing between content boxes without disrupting the layout? I've tried using spacing, padding, and margin properties, but they end up messing up my design. Is there a solution that mimics the column-gap and ...

htmlreactjsmaterial-ui

Centering buttons in HTML and CSS

I am struggling to align my buttons properly in the display. Even when I use float: right;, nothing seems to change. Take a look at the screenshot below:https://i.sstatic.net/4eIGj.png My goal is to have these buttons neatly lined up vertically in a singl ...

htmlcssalignment