When you activate contenteditable in the div and enter text, the shadow dom form looks like the following.
<div id="editor" contenteditable="true">
<div>1번줄</div>
<div>2번줄</div>
</div>
If you enter text and hit enter, a new div is created and the entered text is placed inside the created div.
Is there any way to detect child element creation event of editor?
And is there a related example where I can create functionality like contenteditable in a way that doesn't use contenteditable ?
I can't quite remember the keywords.
Related
I'm trying to create a custom simple text editor so I can color certain pieces of text as the user types. So for some pieces I may want to make green, others blue. To do this I need to bind my content to the innerHTML property of the div which is working fine to initially display my content. (I can see my html rendering in the div).
<div class="textarea-editor" contenteditable="true" [innerHTML]="getBuiltRules" (input)="onRuleEditorFullKeyUp($event.target.innerHTML)"></div>
Then in the input event, I'm grabbing the current innerHTML and want to search and surround certain strings with <span class='color-green'></span> so this text would show green, then I want to have the changes rendered back to the div.
onRuleEditorFullKeyUp(value: string) {
// search and surround some text with html tags then set a variable
this.setBuiltRules = value;
}
The issue i'm having is once I set setBuiltRules = value, it seems to re-bind the innerHTML and the carat position goes to the very beginning. So if i'm typing something, it goes to the beginning after each character.
Is there a better way to do this so I don't lose my cursor position?
Note: setBuiltRules and getBuiltRules reference a service property.
Just wondering if anyone has any ways of adding paragraph spacing visuals to text inside a textarea via CSS, or even JS?
I'm aware of line-height but would like to add the impression of spacing before/after paragraphs themselves inside of a textarea, instead of having to hit enter twice inside the textarea to get a space between paragraphs.
Is this possible with a textarea alone or do I need to consider rich text editors, or maybe even writing a simple text editor myself with paragraph spacing? (I'd rather not go this route as I am merely after paragraph spacing, not all the additional formatting options that comes with text editors)
Nope. Without the line-spacing property you cannot add space between paragraphs in a textarea without altering the value of the area. This is not something that JavaScript or CSS selectors can do.
Yes, it should be possible with JavaScript by replacing the value of the textarea while listening for keyboard event values, specifically for the Enter key.
You store the value in a variable, and whenever a user hits enter (its event value is 13), it takes that text and adds a new line to the end. Now that becomes the value stored in the variable, and a new line is added the next time the user hits enter, and so on.
Here's an easy implementation if you're already using jQuery:
$('#my-text').keypress(function(e) {
if(e.which === 13) {
var text = $('#my-text').val();
$('#my-text').val(text + '\n');
}
});
e is the keyboard event passed in as a parameter, and when that happens to be an enter key, the code stores the text value and then replaces the value of the textarea with that value plus a new line.
Here's a demo on codepen:
http://codepen.io/denmch/pen/qNyjZE
I'am currently working on a web application in which I would have a page with a list of editable text areas and I would like to be able to change their order, simply by dragging and dropping each text area in the wanted position.
Basically, each of these text areas would come nested in , like this:
<div class="outsideDiv">
<div>
<textarea>
</textarea>
</div>
</div>
As I was trying to implement Drag and Drop feature using native HTML5 "draggable" attribute (more precisely, I put it as attribute of my most outside ), I noticed that would make my text areas draggable but also yield a side effect: whenever I click in the text area, it would, the typing cursor would always be at position 0. Thus, it is then impossible to move the cursor to another position, which is not that handy in case you want to edit an existing text.
So my question is, how could I make a text area draggable while keeping all of its features (I mean, without the mentioned side-effect)?
Have a look at the draggable effect in jQuery-ui (http://jqueryui.com/demos/draggable/)
I'm trying to create a hidden textfield for an iphone specific site, basically I've taken a textfield, hidden all of its elements and show an image instead, when clicked this pops up an onscreen keyboard, as well as submitting when the form loses focus.
What I can't get rid of is the text caret. It flashes at me as if I'm some loser who can't set his VCR to anything but 12:00.
Have you tried disabling the text field as well? disabled="disabled"
Why not just change the type of the input element to "hidden" when it's not supposed to be edited? E.g.
<input type="hidden" name="datafield" id="datafield" />
That way it won't allow for the caret to be standing on it. If you need its value to be displayed, add a DIV and populate it with the datafield value. Then just put a click event on the DIV to activate the input field.
I would just like to have an editable div that acts like a textarea that is given focus on page load (i.e. the blinking cursor is visible and typing shows up in the div without having to select the div with the mouse). I've tried calling focus() on the editable div, but that doesn't work.
I'm not sure it's possible to control the cursor, but you can simply focus the element:
function initPage() {
var elEd = document.getElementById('editor');
elEd.contentEditable=true;
elEd.focus();
}
In Chrome, if your element with ID editor has any content then the whole content will be selected. In Firefox you don't see a cursor, but if you type after loading the page it will appear in the element. Simple example here.