Is there a way to unfocus?
I want to update the whole text format using my code and i don't want to give my user the option to write text after it.
I update the format of the whole text (range: start=0, end=text length) using formatText method and then the text area on focus and the user can write:/
There is not an explicit unfocus() API since there's not much that Quill needs beyond the existing DOM blur function:
quill.root.blur()
The user can of course click back into the editor so if you want to prevent that you can disable the whole editor with:
quill.editor.disable()
You may still make API calls but the user will be unable to interact with the editor while disabled.
I had an issue with the cursor remaining on the screen after blur. I realized that quill already has a hidden focusable element that seems to fix the problem.
quill.querySelector('.ql-clipboard').focus();
Related
I have a requirement where user is required to copy the text to an input every 30 seconds, so that the user wants the cursor to be fixed there, even after clicking or moving somewhere else it should come back to that particular input filed only, so user can paste easily. Please suggest me how can achieve this using SAPUI5.
Thanks,
Instead of locking the "cursor" or focus to a specific field, i'd suggest you react to the paste event on the document/app
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
I'm creating a staff document which requires only 2 things to be unlocked.
1. A placeholder for an image, I've implemented that just fine by creating a button with "Icon only" and using a javascript code as follows:
// Mouse Up script to import a button icon
event.target.buttonImportIcon();
It works perfectly!
However I also need a text field which can be clicked once, and have text filled in and saved, because quite frankly the people that will be using the document, couldn't edit a PDF if the human race depended on it haha
Any help would be appreciated greatly!!! Thanks!
Create a text field (which I'm assuming you will want to start off as empty) and then add the following command to activate on Mouse Down:
(this.getField("TextFieldName")).value = "The text that you want to add...";
Where TextFieldName is the reference to the text field that you want to auto fill.
This will make the text appear when the text field is clicked. You could add a clear button using similar code so that erroneous clicks can be undone. Also, you could set the field to be read only to prevent unwanted changes to the auto filled text.
I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});
I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.
Would I be shooting myself in the foot by using a div with attribute contentEditable="true" as a text field rather than a textarea?
It would work fine, but it'd be a little bit more difficult than a form, simply because you're going to have to wire up your own logic to make the button's click event track down the correct div, get its content, and then perform the submission. The advantage of a textarea is that the browser takes care of all that for you.
It's not the same thing. First semantically, the purpose of a textarea is to write/edit plain text whereas with contentEditable you can edit list for instance (see: htmldemo)
Second the behavior is also different. For example, in chrome when you test the link below and that you delete all the content you loose the focus (the div element disappear) which is not the expected behavior, or if it is it's idiot.
The Gmail's mail edit box is also a div with contenteditable="true". The major benefit is it has auto-adjust height as user input text/content. Also it supports rich text inside. You can mimic the Textarea by setting a max height if need.
On the other hand if you want auto height in Textarea, you might have to use js to bind some listener to the oninput hook.
In divs with contenteditable="true" the content can be html formatted, e.g. text with different colors.
See also https://stackoverflow.com/a/40898337/11769765.
I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.