Antd4 select maintain text selection in text area when selecting font - javascript

I am using antd4 select as a font family/ font size selector. So when highlight text I would like to preserve the text selection highlighting and maintaining focus on the text area when selecting another font.
I have tried to preventDefault() on mousedown, but that didn't work as expected as you can see from the sandbox below. Thanks for any help.
sandbox
EDIT: This was working with antd v3 select but they rewrote it and is no longer working.

Ciao, I modified your sandbox and now text stills highlited and focus is on textarea. In brief:
Added a ref to textarea called this.nameInput.
I replaced onMouseDown function with onChange.
On function onChange I move the focus into textarea by using this.nameInput.focus()

Related

How to handle 'undo' and 'redo' functions in content-editable div

I'm working on a contenteditable div and trying to create a text editor, but in this text editor I'm adding some elements like image and div. If I'm supposed to add and remove elements in editable div and then hit CtrlZ undo function is not working (not getting element back).
Please let me know is there any solution for this. Undo function is only working for text inside the contenteditable div. Thanks in advance.
You can use document.execCommand for undo and redo the changes in the editable div's. You can refer this document for more details execCommand

Getting user input text without HTML input elements

Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.
Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>
But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.
Take a look at x-editable. It will suit your needs, i think.

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

Is it possible to restrict the range of select all/Ctrl+A?

I am working on a website where I would like to be able to display a box containing syntax-highlighted source code for the user to copy. When I click on the box, giving it focus (Chrome shows its focus outline), and type Ctrl+A, the text of the entire page is selected, whereas I would like only the syntax-highlighted source code within the box to be selected.
Is it possible to restrict the range of select all/Ctrl+A to only the text within the box, preferably without using an <iframe>?
My first thought was to try contenteditable. When I click in the box and the editor caret appears, typing Ctrl+A selects only the text within the box, as desired, but it also allows the user to change the code, and I think that the editor-interface aspect of making the box contenteditable will be confusing to users. If I wrap the source code text within a <div> having contenteditable="false" within the <div> having contenteditable="true", then the source code text is read-only, but typing Ctrl+A selects the text of the entire page again.
Here is a test page: http://jsfiddle.net/5crgL/
You can use the document.createRange(); method to select the text from a particular element.
and to handle the ctrl+a you can use the jQuery keydown method and can call the JS code to select the DIV text.
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
please see jsfiddle here jsfiddle.

Two different text styles in placeholder

Is it possible to have two styles in an input box placeholder?
Here is an example of what I'm looking for:
http://i.imgur.com/uQ3zf.png
Options would be use a background image that has the text, or use an element overlay with th text or put the text behingd the imput.
Here's a simple demo that places the text behind the input and hides it on focus
http://jsfiddle.net/GRsQc/1/
One solution would be to position text over the input field, obviously it can be styled as pre your example and hide the text using jquery or javascript when the text field is selected. If you want to provide some code I can be more specific.

Categories

Resources