Simultaneously moving element within text input (textarea or contentEditable div) - javascript

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.

Related

Preventing html ENTER event without disabling keypress

I'm building a spreadsheet site using <tr contenteditable="true"> for cells.
I've implemented an onkeyup function whereby pressing enter when focused on a cell shifts focus to the next cell directly below, but the problem is that pressing enter by default also adds a line break with contenteditable elements, resulting in an empty line being created before moving on the next cell.
Both fire at the same time, so I don't have a chance to cancel the keypress without also breaking my function. All of the solutions I've found involve completely disabling the enter key when focused on the element, but that won't work here since my function relies on being able to press enter while focused on the element.
All I need is for the tr to not insert a <br> on enter, I do not need to disable my enter key.
Adding e.preventDefault() on enter events solved the issue. Make sure you only put it on the enter key and not for all keypresses otherwise you will disable text input for the cells preventing you from being able to edit them, and make sure to use onkeypress/onkeydown and not onkeyup.
Big thanks to #Robin Clower and #Zac in the comments.

How can I determine if change event occurred from user input?

I have a dynamic form that updates based on user selected values.
One particularly input field (type number) I calculated a default value for and update. But if the user every selects their own value, I want to respect that and not re-calculate the default as they continue filling out the form.
What would be the best way to detect a user input vs my programs input?
I thought about onclick events but want to respect if they use the keyboard to enter. I thought about an on change event, but since my program recalculate the value frequently that won't work.
I found this answer that has ideas for C# fields Determine If Changed Event Occurred from User Input Or Not
I found this answer that talks about using the input event - Detecting input change in jQuery? - which seems like it could work but would fire on every key stroke which seems less than ideal.
What do you think if you set a "keydown" event on the input. And if your script changes the value than you just use "element.value = "Foo"?
Here's an idea that doesn't require hefty code interventions or a large number of event triggers: add a focousout or blur event (whichever fits the needs of your page better) to your input which, when triggered, will take the input's value and compare it to your calculated default. If different, it would mean the user has selected a different value. You could then store the user's value in a hidden element (a simple span will do the trick).
Next time you recalculate your default, you could check if your hidden element has any content and then not replace the value in your input. Or you could check the content of the hidden span containing the user's input before you run the recalculation and avoid it altogether.
That would be a solution that does not change the user interface. If possible, the simplest solution would be adding a checkbox that allows the user to define their own value.

Moving textarea content to input field and back removes new lines. How to overcome?

That's it.
The web app that I am working on is pretty big and I am not sure whether field can get their types changed.
Anyway,
we have a textarea in a popup that on some text entered and Save button in the popup clicked, moves all the textbox content to an input field of type text.
Later if a user clicks on the input field he gets the popup with the textbox rendered again and the textbox content is obtained from the input.
The issue occurs already at the first shift as all new lines are removed on moving the text from the textarea to the input field.
I have found that the reason for new lines missing is that html requires tags introduced in order to render those, but I have expected the text to keep formatting after getting back to the same textbox.
Why are new-line characters removed from the string?
Do you have any suggestion how to overcome that? I am not sure whether I will be able to change the field types.
Something you could do is, when you save and move the content to the input, you can store the "textarea" value on a javascript variable. Then, when opening the popup again, place the variable value to the textarea, and the formatting will be still there.

Losing selection when clicking checkbox label

I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/
It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.

MSIE: Keep focus in text field when clicking outside of it

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
...

Categories