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 much luck. Html JavaScript In this code, you have to press space twice but the bigger problem is when you try to create a
Tag: contenteditable
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 letter in the div would turn green, whilst the other letters in the other div’s are a different color. So basically,
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 to be able to write text between the items and when you press again the button, only the items change but the
Dealing with cursor with controlled contenteditable in React
I’m trying to set up a controlled contentEditable in React. Every time i write something in the div the component re-renders, and the cursor/caret jumps back to the beginning. I’m trying to deal with this by saving the cursor in an onInput callback: This doesn’t work, the cursor is still stuck at the beginning. If I input one character in
How can I type in a textarea and have that text be added to a contenteditable div?
I have a <div contenteditable=”true”> and a <textarea> on my page. I need to get the text that is typed in the textarea to be displayed in the div, while keeping the text that was already in the div. I already kind of achieved that with a keyup function on the textarea but it is not working properly. I believe
How could I set a maxlength to an HTML “td” tag (cell)?
I have a HTML table with editable cells (every td tag in my table has “contenteditable” set to True). The users are meant to fill the table with times in HH:mm format, so I added an onkeypress attribute which triggers a function that checks if the user is entering something other than numbers or the “:” character, and ignores it
Moving caret to the end in a content editable div not working in IE11
I implemented a process where the user selects an option from a div, and it is inserted in the content editable div. To achieve that, first I save the selection range on the mouseup and keyup events of the editable div. When the user clicks on one of the options of the div, it restores the selection range, inserts the
Multiple contentEditable, unable to move carret to end of span with arrow keys
I have multiple spans with content editable property set to true, like this: https://jsfiddle.net/du7g39cz/ Problem is that when I am using arrow keys to navigate around span element, I can not reach end of individual span as blur event gets called when caret reaches last symbol. I can reproduce this behavior on all browsers apart MS Edge. I must note
Focusing on nested contenteditable element
So, I have two contenteditable divs nested inside of another: Here is Fiddle. When it is focused, nested should be focused but using console.log(document.activeElement); it shows that the top is focused and it doesn’t recognize the nested div. In a case where content is being edited, I need to recognize nested div element instead of the top element. How would
React.js: onChange event for contentEditable
How do I listen to change events for a contentEditable-based control? Code on JSFiddle. Answer See Sebastien Lorber’s answer which fixes a bug in my implementation. Use the onInput event, and optionally onBlur as a fallback. You might want to save the previous contents to prevent sending extra events. I’d personally have this as my render function. jsbin Which uses