Questions tagged [contenteditable]
contentEditable is an HTML attribute (invented by Microsoft and standardized in HTML5) that is used for client-side in-browser "rich text" editing.
2,477
questions
0
votes
0
answers
16
views
Contenteditable in chrome converts classes to inline styles
I'm trying to create an editable component but I'm having trouble with the Chrome browser.
When I copy the content content using the html block (red in the example) and then paste it anywhere and ...
0
votes
1
answer
23
views
contenteditable inside a css grid element, seems to be a bug in Google Chrome
There seems to be a bug in Google Chrome at least (not in FF), which makes a contenteditable element inside a grid to be activated, when a click occurs outside of the element.
Is it possible to fix it ...
-1
votes
0
answers
22
views
edit HTML permanently using "contenteditable"
I'm currently working on an easy-to-use website editor (https://grimm.agency/?edit=true).
My goal is to get the inner HTML of the editable Elements (each one has it's own id) and change the ...
2
votes
1
answer
22
views
Why doesn't onKeyDown and onKeyUp fire when attached to a span within a contenteditable div?
here is a code snippet demonstrating the problem:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div contentEditable=...
0
votes
0
answers
22
views
Select multiple contenteditable
I have multiple contenteditable element, and I would like to allow user to select text across elements. I've done some search and find two solutions:
when select, set contenteditable to false
use a ...
0
votes
0
answers
24
views
How to Combine 2 native html form elements together
I am supposed to write code in html, css and js that looks like this, i do understand that it requires the user to enter a city (in a textarea) and rent or buy (in a select) in html, however how to ...
0
votes
0
answers
45
views
HTMLElement.blur() does not remove focus in Safari when used on contenteditable elements?
When used on a <div> with contenteditable=true after focusing on that element, Safari (15.5) does not appear to handle HTMLElement.blur() normally : it removes the border highlighting the ...
0
votes
0
answers
65
views
How to fix caret position in content editable div to render the emoji
I am in react, and have content editable div. Now there is a button, on click button "hey" content will be pasted/render in the cursor position.
Now I am having the issue with caret position ...
0
votes
0
answers
21
views
Can someone identify what this toolbar for an editable div could potentially be?
I was working with the ability to paste images into a div where it would then be uploaded via a post request. So far it seems to be working, but I noticed this toolbar that seems to show up when I ...
0
votes
1
answer
34
views
tabs in multiple lines of contenteditable div
in the example below pls place cursor at the start of any line and pressTab key
this works fine
I want the same if multiple lines are selected at once and also delete one tab if Shift+Tab is pressed
...
0
votes
1
answer
34
views
How to put/paste the content where cursor is there in content editable div
I am a newbie on react. I have a content editable div. What I want is Make a button, on button click -> "HEY" word will be added. Let's say my content length is 100, and I have clicked on ...
0
votes
1
answer
39
views
Text cursor problem when inserting characters into a contenteditable element
There is a pre element that is contenteditable. I wanted to add tab character via TAB button. So, I added js method called putTab. This method works fine. But there is a problem about text cursor. ...
1
vote
1
answer
18
views
How to make insertion into contentEditable paragraph bound by its size?
I need an editable one line paragraph such that the text inserted into it must not overflow its size.
I'm currently using CSS to try to hide the overflow and also to avoid multiple lines (by not ...
0
votes
0
answers
27
views
react-contenteditable cursor jumps to end when state changes
I am working with this Library react-contenteditable
I have a text editing area where when the state changes in the redux the cursor jumps to the end. i want the cursor to stay where editing stops
<...
0
votes
0
answers
12
views
How to set cursor position in contenteditable div without random span
I have two divs inside a contenteditable div, like this:
<div contenteditable="true" id="mainDiv">
<div id="div1">Line 1</div>
<div id="div2&...
0
votes
2
answers
47
views
How to recreate google keep note
I tried to create my own notes for the school project. And I ran into some problems, I am using contentEditable for the note-taking part and it auto-generates divs. I tried to remove them with not ...
1
vote
1
answer
48
views
JavaScript - Prevent cut and paste by drag and drop
I want to prevent the following behavior on a contenteditable div, because it messes with the structure if the div contains any other elements but text nodes.
I have tried the obvious:
Setting ...
0
votes
0
answers
41
views
React -how to convert a <div> to input
I have a table that each row that has some td that here these 2 td are important for me and I want to change them: name & family.
I want to change each name or family td when the user clicks on it....
0
votes
0
answers
22
views
what event should I use when a change is triggered in a contenteditable div
<div
id="para_1"
className="para"
contentEditable={true}
suppressContentEditableWarning={true}
onKeyUp={(e) => {
console.log(e);
}}>
...
0
votes
3
answers
56
views
Placeholder text in <span> element is not working correctly specifically in Firefox
I am trying to create a placeholder in span element, and when user focus on the text the placeholder disappear and user are able to type something on it.
If you run the code below in other browser ...
1
vote
2
answers
62
views
Spans with display:none is not showing the space bars in firefox
We had a use case where some spans with display:none is added to our content editable div.
So when the user somehow lands on the span and tries to add content, the space bars are getting added inside ...
0
votes
1
answer
58
views
how do i select an entire url address in contenteditable
in contenteditable, links don't work, so i'm thinking the best solution is to at least be able to select an entire url with one click or two clicks when the cursor is in any part of the url, then ...
0
votes
0
answers
43
views
JavaScript - Contenteditable bold option without execCommand
I want to create a simple WYSIWYG editor with contenteditable and a bold option. This used to be really easy to achieve using execCommand as can be seen here.
Unfortunately execCommand is now ...
0
votes
1
answer
43
views
Compose HTML Paste in Javascript
I'm using an HTML DIV in Content Editable mode. From Javascript, given a valid image URL in a string, how can I convert that into something that I can push onto the clipboard so that when I paste into ...
0
votes
1
answer
50
views
Cropping data:image/png;base64 for large print screens
I'm trying to crop large print screens added in contenteditable by ctrl+v. Have tried several ways but I can't get it to work. The last methode I tried is the drawImage that's why I left it inside the ...
0
votes
1
answer
28
views
display cursor next to an contenteditable="false" element
when there is an [contenteditable=false] element inside an editable div, it seems impossible for users to add more content after it, and the type cursor is not showing next to it.
is there a way to ...
0
votes
0
answers
42
views
Is there a way to use jQuery .append on contenteditable text position?
Like the title say's, Is there a way to use jQuery .append on contenteditable div, selected text position? I can find a lot for the contenteditable insert html at that position. But I need the jQuery ....
0
votes
1
answer
59
views
querySelectorAll only gives output for one div in grid after forEach() loop
Recently, I have been trying to create a wordle game but with 8 letters, and it has been going well, though, when I input my answer into the div boxes, only the first div gets a response when I click ...
0
votes
2
answers
52
views
Weird double click behavior with text highlighting, when dynamically changing the contentedible attribute of a div
The requirements:
We need an editable div that only becomes editable after a user clicks on it
The div goes back to being read-only when focus is taken away from the div
The issue:
I can achieve ...
0
votes
1
answer
56
views
How to get user input from contenteditable div in a grid?
I have been trying to create a wordle-type game, but I don't know how to get the user input from the contenteditable div's. What I want to happen is if the user inputs the letter 'a' for example, the ...
0
votes
0
answers
31
views
Keyboard selection issue with contenteditable
I'm seeing an issue where if you try to select contenteditable divs you can only select n-1 rows using keyboard navigation. This happens in safari and chrome so it doesn't seem like a browser bug. It'...
0
votes
0
answers
20
views
Figuring out why selection is changing (selectionchange)
I'm trying to figure out why selection keeps on changing in my React web application. I'm working with contenteditable div and while typing the blinking cursor would occasionally jump to the beginning ...
1
vote
0
answers
23
views
How to advance to the next contenteditable grid div when the current grid div has a value already?
what I want to accomplish is to find a way to make it so if the contenteditable div already has one character, it immediately advances to the next div box on the website I am trying to create. I am ...
1
vote
1
answer
50
views
How to make on-screen keyboard interactive with content-editable div?
I am creating an on-screen keyboard for a Wordle type game. I've been trying to make the on-screen keyboard actually interactive and input the proper letter in the grids above. (For example, if the ...
0
votes
1
answer
13
views
how to save user edited information
I am new to coding and currently building a website.
I am struggling with a part of my project-----
The basic idea of the function is to...
user clicks the edit page button
the page enters edit mode ...
0
votes
1
answer
16
views
Create text by checking radios
I want to create some text in a contentediable by checking radios (without pressing a button at the end). I've created this but don't understand why it doesn't work :/
I guess there is a problem with ...
1
vote
1
answer
28
views
Add information in contenteditable and generate stuff without loosing added infos
So I've created a list of radios where you can choose between 3 choices (cf. snippet) and then generate a report in a contenteditable area with the value of each radio.
It works fine, but I would like ...
2
votes
1
answer
33
views
Selection in contentEditable <div> collapses as soon as I click a button
As can be seen below, instead of <button> or <input> I have used <div> to create my UI buttons. Now the problem is as soon as I click any of the buttons, the selection in the edit ...
0
votes
1
answer
20
views
Copy innertext from a contenteditable div?
I know that there is a similar question but when I try it, it doesn't work. I figured out that it's because I've changed the position of the button above the div I want to copy, but I don't know how ...
0
votes
0
answers
15
views
RE-selecting text after losing focus on editablecontent div
I have the following code:
<div id="textBox" contenteditable="true"></div>
I use the following code to get the selected text within the div.
if (document.getSelection) ...
0
votes
2
answers
25
views
React editing input element that has a value
i have this input:
<input
type="text"
autoFocus
value={post.body}
/>
i want the user to be able to edit the value, i tried to set contentEditable but it doesn't work
0
votes
1
answer
43
views
How can I select all text in a div after focusing using a ref in react?
In a nutshell, I'm trying to select all text after setting it to contentEditable = true and focusing, all using a ref. Ideally, I would do this using an onFocus event. I was unable to find any ...
2
votes
0
answers
17
views
Strange results from document.getSelection
I am working on an application that keeps track of edits in a contenteditable section of an HTML page. When something is inserted, this content is wrapped inside a span with class inserted. So far, so ...
1
vote
1
answer
33
views
Caret is invisible on contenteditable div when parent has filter
I have an inline div with contenteditable enabled which is inside an element that has a drop-shadow filter. While one can write in the contenteditable div, the caret is invisible. How can I make the ...
0
votes
2
answers
33
views
Content Editable Field not working in PHP but works in HTML
OK I know the code for editable field working in HTML, inline edit. But I am unable to use the same i PHP code
I am attaching below HTML working one and PHP in echo where I am lacking
Please Guide
...
1
vote
1
answer
62
views
contenteditable moves the cursor outside the block
if you place another html block with the contenteditable="false" attribute in the contenteditable block, then the cursor moves outside the block as shown in the screenshot.
Try to start ...
2
votes
1
answer
179
views
Odd Behaviour with ContentEditable content
I have an odd issue which for the life of me I cannot understand and hoping that someone has come across this before or may have a solution.
My Angular app is using a contenteditable <div> for ...
1
vote
0
answers
45
views
Contenteditable div needs 2 clicks outside to blur
CodeSandbox: https://codesandbox.io/s/charming-banach-tvdeu
Problem
I need to use multiple content-editable on my page. One below each other. They work just fine except when I onBlur the div by ...
0
votes
2
answers
43
views
cannot edit element with `contenteditable` and absolute positioned element
The content element is not editable (not able to select it) despite the z-index being set. How can this hover effect be achieved with the element still being editable?
#outer {
width: 100px;
...
0
votes
0
answers
23
views
How to prevent deleting image in ContentEditable
I created a text editor in ReactJS and I use ContentEditable in my project. so my problem is that when I insert an image into my text editor I will remove it just by clicking on the delete button on ...