I'm trying to figure out how to select only the visible text in a textarea box. So if there is a vertical scroll bar, any text outside the textarea box's dimensions would not be selected.
I basically want to retrieve the string/value of the visible portion. How to do this?
Related
I am creating a basic editor using slate.js and React.js.
I want to insert text inside the editor at current selected position when i click on a card outside the editor i.e. when i click on a card containing a text, the card on text should get inserted at the last cursor position in slate.js editor.
You don't need to get cursor position. Slate remembers selection when you click your button. You just need to insert content:
editor.insertBlock(...)
I have a contenteditable div with a span inside it.The div is of type input. The div also contains a button in the right corner.When you click the button a popup menu shows a list of emoticons and when I click on an icon I need to add it to the cursor position in the div. I have looked at Tim Down's solutions but couldn't get it to work.
Get caret (cursor) position in contentEditable area containing HTML content
and
Insert html at caret in a contenteditable div
The problem is that the div is not the only element on the page and is not necessarily on focus when user clicks on button to insert Emoticon. Also apart from the span tag the div may or may not contain text when the user clicks the button.
Any help to get the correct cursor position and insert the icon at the position is appreciated.
I would like to show a div (modal) close to a selected (highlighted) text in the page.
I get the selected text positions (start and end positions) but now, I dont know how the modal div can be positioned in the center of the highlighted text.
Try absolute positioning.
$(modal).css('position','absolute')
in the same fashion you can set attributes top and left to whatever number you need. This will place the modal where ever you need.
I'm trying to do something like that:
When use enter "#" in the textbox, the colorpicker div must be opened in bottom of the cursor position. I can get the order of the cursor with element.selectionStart but it's not reliable way to do that. It must be a pixel value. Any suggestion?
If you're sure that the textfield will never scroll, you can simply replicate the font and box sizing of the textfield in a div positioned out of view, and then measure the size of a span with the same contents as the textfield.
I have a text area and a div i want that when i click and move the div up or down the text area also re-size, i.e. the div below the textarea should act as the vertical resize handle for the textarea.
using Jquery UI you can make the bottom div draggable and use this to resize the textarea, I made a little jsfiddle for you which demonstrates this :)
http://jsfiddle.net/GspjK/