I am trying to make it possible to insert text at the current caret location in a text field when clicking something on the page.
In order to make this work the focus should not leave the text field when clicking, and the caret should not be moved.
I can get this working in - for instance - chrome with event.preventDefault() in the mousedown event.
But in internet explorer I simply cannot make this work. Any suggestions welcome.
Clarification: I am trying to provide some good means for the users to input exotic characters that can not be entered directly from their keyboard.
I have implemented for instance ctrl+alt+p which works well in all browsers, except internet explorer where I cannot stop the default behaviour of pressing ALT (activating the menu bar).
I have then made a "palette" of the characters next to the field, that can be clicked with the mouse while typing. This works well in all browsers, except internet explorer where I cannot prevent the default blur-behaviour of a mouseclick.
Maybe this is a dead conversation but I have a solution.
For IE specifically look into the onbeforedeactivate event. You will want to attach this to the the element you want to keep focus. It's a bit tricky because if you always cancel this event you can never loose focus on this element but if you're careful how you implement it you can achieve what you want.
I've been doing this for a while now with nice clean results.
Don't do this
I suggest you don't do this, because keeping (or better said returning focus) caret in text field will also prevent users from changing browser's address bar which is something you don't want..
I suggest you rather explain your process more detailed and maybe we can suggest a better alternative.
After some clarification
What you should do is insert text/character at caret position. input and textarea preserve caret position even when they loose focus. So you should do something similar to what stackoverflow does here. When you select some text (when you type question/answer) and then click B icon on top, two stars are added around selected text. This is how you should do your special character insertions. When user clicks a perticular exotic character, that character should be added/inserted at input's caret position.
There are quite a few stackoverflow questions related to solving this exact problem - adding text at caret position:
How to insert text at the current caret position in a textarea
How do I insert a character at the caret with javascript?
Setting (or Reading) value of Cursor/Caret in HTML TextArea
Inserting text at cursor in a textarea, with Javascript
Insert text on the current place of the cursor in the browser
...
Related
I'm trying to make something like gist.github.com but with MathQuill so you can easily type text and math. But i've run into a few problems.
A single editable math field (span) where you can type math and switch to text mode with a keyboard shortcut Shfit + T. Javascript will capture the keypress event and execute mathField.cmd('\\text');. You can then use the arrow keys to move in and out of text and math mode. Seems perfect, unfortunately this acts like a "input" and not a "textarea" so you can't press enter and jump to a new line. And it doesn't seem like changing from span to textarea just breaks everything.
So seeing the first method didn't work out, I added a content editable div and you can switch to math mode with a keyboard shortcut Shift + E. Javascript will capture the keypress event and insert the html <span id="stdin"></span> into the div and run MathQuill on it. Unfortunately this is extremely buggy when it comes to moving the cursor around and just annoying to deal with. Also i'm not sure if setting multiple mathquill fields is possible (I haven't tried it yet)
I want to stick with the first method since it's simple and works just the way I want it to. But I don't know how to change it from the "input" style to "textarea".
Does anyone know how to do this?
The task is to implement an input which have a submit element right after the text end and submit element can move when user is typing or inserting text in the input (user can't delete this element or cange it, only click to submit text and also user can't type text after it). First implementation that I tried dealed with input event of textarea, counting absolute submit element position depending on input text length. It seems that this is not a good solution due to troubles with this event, especially then any key is pressed for a long time (input event simply fires just once). So I'm looking for solution with contenteditable. The problem explained here is similar to mine in some way but still I can't figure out how to implement this in my case.
"editable" nodes (whether they're form elements or elements with #contenteditable set) allow pasting, that is they both trigger a paste when C-v/⌘-v is pressed and enable a Paste item in a contextual menu on right-click (and I guess they trigger a paste on middle-click in many linux environments).
It's possible to intercept left clicks and focus an editable element nearby to allow/intercept keyboard-based pastes, but I'm also looking for middle-click and context menus to behave and enable pasting in specific context (elements which kinda sorta look and feel editable but technically are not).
An example of the issue can be seen playing with DocumentCloud's visualsearch: it looks like a big input with tags but is a sequence of items and small (10 px wide) inputs. Left-clicking in the white space at the end focuses the closest input, but right- or middle-clicking at the same place does not enable pastability, one has to click specifically on an input for this to work.
SO's tags editor somewhat works around the issue by having a single big input filling up the end of the area (but no way to insert new tags at other places), but the issue exists if one middle- or right-clicks between tags or on a tag.
This is a 2 part question:
1)
click on one of the demo dropdowns on this page. when you tab over to the next input, the text is selected/highlighted in firefox. how can i prevent this from happening?
2) bonus: can you review my code that is hosted on google and tell me what i can improve?
Well, that is just default behavior on Firefox. A possible workaround is to have the input fields execute a JavaScript or jQuery function on select, have the function blur the field (which would deselect the text) and then refocus on the field. Very basic and I'm sure it'd need a couple extra hacks. Unfortunately without scripting, no there is nothing you can do to prevent that.
I honestly recommend that you leave it alone. That functionality was put in place so you wouldn't have to use your mouse when typing into forms, hitting tab would select all the text so you can easily retype it or hit the right arrow key to go to the end of the field. Removing the functionality will only irritate some of your visitors. If they're using the tab key to get to the next field, they probably want that functionality.
I'm trying to insert text into an html textbox when the user pushes buttons. This is a simple on screen numeric keypad. I have found many different scripts claiming to be able to find the current cursor position in a textbox cross-browser, but none work in IE (I'm using IE8). Is this just an IE8 defect? Is there a workaround?
It seems like there must be a definitive answer about this somewhere, but I have looked far and wide to no avail. To reiterate, how do I find the current cursor position in an html textbox?
look here:
http://javascript.nwbox.com/cursor_position/
Pete, you can also save the caret position by using an "onblur" event so you always know the previous caret position.
The link in the selected answer is no longer working.
I found out you need to use field.selectionStart.
Please check out this answer:
https://stackoverflow.com/a/48150864/4031815