Given a block of text in a div and an input field:
I want to be able to select some text in the div (drag across it with my cursor):
Then click on the input field and enter some text while "ome rand" remains selected (unlike in the following image / JSFiddle):
JSFiddle: https://jsfiddle.net/moa9xf2j/
My attempt at this so far has been to get the startIndex and endIndex of the selected text, then use setSelectionRange when the input field is clicked on. However, this didn't let me enter text in the field.
There can be only one active selection/cursor in any given frame.
In order to keep the old selection and still type in an input box, your selection and your input box need to be in different frames.
So do something like
main.html
<html><body>
<div>Some test</div>
<iframe src="otherdoc.html"></iframe>
</body></html>
otherdoc.html
<html><body>
<input></input>
</body></html>
You can use iframe's srcdoc attribute to avoid having a second document.
https://jsfiddle.net/p4ar85sg/
Related
Need of the following feature
select the text/string using the mouse (just like we usually use on mouseDown and mouseUp )
Replace the selected string with the input tag
replace the original string with the text which we filled in the input tag.
Below images shows whole idea.
step 1: select the text (select only one not same as shown in image
step 2: replace selected text with input tag
step 3 : enter text in input tag
step 4: on button click we add that string to original string and input element will remove now
I tried replacing selected text with different text but was unable to replace it dynamically !!
posts i read before post this question
How to find index of selected text in getSelection() using javascript?
How to get the start and end points of selection in text area?
replace selected text in contenteditable div
Replacing selected text - HTML / JavaScript
Select Text & highlight selection or get selection value (React)
Within Servicenow portals I am trying to create a input text field that has a few requirements when the user tries to make changes to the text. Within the form if the user wants to change the text that has already been added the new input text will have to be highlighted. Only the new changes can be highlighted. The previous text will stay the same without any highlights. I have looked into the html tag but that highlights the entire text field and also tried using a 'focus' within the css tag name.
HTML:
<input type="text" value={{data.text2}}>
CSS:
input:focus::first-line { background-color: #fff2ac;
}
You could use Javascript to position a dynamically generated span with the highlighting, on top of the input ... and then update that span's text whenever the underlying input changes.
See the last option in the top answer here for more details: How to highlight text inside an input field?.
It even mentions a jQuery plug-in with this effect that you could use, or examine the source of: https://github.com/garysieling/jquery-highlighttextarea.
I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked
One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.
I am doing a task that display cafes around a location by using zipcode.
If we enter zipcode in a text field.it will get all cafes and display in a alert box.
Problem is if we enter zipcode and press enter cursor is presenting in background text field and if we enter any thing it is typed in that text field.
I think you want to remove the focus which is set to text box.
For that, you can have jquery blur() method.
To disable auto-focus on a particular element, pass the element id as below,
$(function(){
$('#someid').blur();
});
I want to create some text based on user input, and when user enter some text, the first word will automatically set backgroundcolor, but the other words still remain same (no background color), can I do this ?
Thanks
WYSIWYG editor will be the best choice for previewing text and editing at the same time.
Some popular ones are
TinyMCE
STEditor
FCKeditor
You could do it with an iFrame if you turn designMode on, add an event listener for keypress then wrap the first word in the iFrames body with <span style='background-color: red'></span>. You would then have to have a hidden form field that mirrored the data that is typed into the iFrame (removing the span tag).
If you want to go this way let me know if you need any more help.