I'm developing a small application that consists on a set of text inputs, and each one will fit only one character, and all inputs together should behave like one. So, when a input is filled with a character, the next input should be highlighted, behaving like the input's caret. In the same manner, when you empty an input, it should behave like a common character deleting, and the previous input should be highlighted.
You can see my work here: https://codepen.io/Vitaozim/full/vqaRQY
Sample here:
Here's how I've done it:
Whenever any of the input elements if focused, its whole content is
highlighted, to make sure any input it receives changes its whole
value.
Whenever the input event is triggered in any of the input elements,
one of these may happen:
If the input's new value is not blank, the next input element is focused. If it receives a value with more than 1 character, the code will trim the string and leave only the last character.
Else, the value is programatically changed to one single space, and the previous input element is focused. The value is changed to one single space so that whenever that input is focused again, there will be some content to be highlighted and then deleted, triggering the "backspace" condition.
The problem is, it works perfectly on the following browsers:
Chrome for Mac and iPhone
Safari for Mac and iPhone
Firefox for Mac, iPhone and Android
But it's buggy on Chrome for Android. I tested it in many different devices. The "backspace simulation" bugs and the input's value isn't highlighted on focus.
I've made some tests, and I noticed that if I set the selection after a setTimeout of 100ms, it works. It's like i'm overriding the browser's default behavior... But that's still an really odd behavior, because it only happens on the "backspace" simulation. Any other situation where the input is focused doesn't have this bug.
This seems to be a common issue with Chrome. You should be able to use the following.
setTimeout(function() {}, 0);
Other StackOverflow answers suggesting this is a known bug in Chrome / Chromium.
https://stackoverflow.com/a/32049253/1050507
https://stackoverflow.com/a/17384592/1050507
Related
I'm trying to set some validation for an input field. It is working fine everywhere except on iOS.
Here's some example code but the are two points to consider:
It must be a type="text" input because I need to allow the user to type
special characters like - and /
I made some regex to handle the input validation but for the sake of
simplicity I'm omitting it from the snippet.
https://codesandbox.io/s/youthful-morning-gjjsq
The original code is from a React project with Redux so I reproduced the same logic with both state management from React and from Redux to make clear the problem is not coming from neither of them. In the example I set the if-else conditional to allow any value less or equal to 20 to be displayed in the input fields and, as I said, it works OK. Nothing fancy, it's just to demonstrate that when the value is greater than 20, or when is not even a numeric value, the input field won't get updated. But whatever the reason, for iOS when, specifically, the dash (or minus) character is inserted in the input field the other characters get erased. Try typing 2- or 20- and the characters will disappear. If I try to type other character like / or ?, whatever, the values are not erased though. The desired behavior is to keep the value untouched (i.e. 2 or 20), not delete it.
The problem doesn't happen on Windows and on Android; it's only on iOS no matter the browser (not sure if it happens on Mac too). I tried return false, e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation(). None of these worked.
Does anybody could help me with this? Again, the code I provided is just an example based on the original code which I can't reproduce here. I can clarify better if needed.
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?
I have a web page with an odd behavior on part of it.
On most of the page, the input tags work just the way one would expect.
Here's an input tag I put in to test:
<input name="vanilla1" value="vanilla" />
In one part of the page, I can click on the field to edit it, but only at the front of the field. So, if the input tag had a value of "vanilla", I could click in front of the "v" and start typing or deleting. But it won't let me click between the two "l" characters and start typing.
It's not easy to just post a full working sample, I would have to retype by hand a lot of code.
If I wanted to get that behavior I don't have a clue of how to do it.
Any ideas of what to look for that might cause this?
It's obviously not disabled or readonly because I can edit it.
When I inspect the problem input tags in the IE DOM explorer, they don't look any different from the input tags that work as expected.
There's javascript, html, angularJS and dojo, plus the esri gis api css libraries in the technical mix.
A few more observations:
In IE, when I click on a working input tag that already has a value in it, I get a little X show up on the far right of the input box. If I click on the X the field is blanked out. On my problem input tags, when I click on them, I get the X but clicking the X does not work. So I appear to be accessing the right object.
When I inspect the object, everything looks normal. No javascript events attached, it's not read only or disabled.
Isn't it like covered by another node or something like that?
Did you check it in all browsers or only in IE?
Try to open Chrome DevTools and click the "Select an element in the page to inspect it" (top left corner of the DevTools window, CTRL + Shift + C shortcut on Windows) and hover over that input. See if there's possibly any element that may cover it. If there's - voila! Remove that overlay and you're good to go. If not - I don't have any ideas for now.
I try to focus an element of an email field in this webpage, with the following code:
document.querySelector("#user_email").focus();
While manual focusing with either clicking on the field with the mouse or using tab works, the focus() method fails to create the focus, as it seems both from the fact the CSS doesn't change, and the console returns "undefined".
As a newcomer, I ask why?
When you're calling focus() from console, focusing won't happen immediately - you have to go back to the site (close console). When you go back from console to a website by clicking on a website, focusing won't happen. Close console using shortcuts or use setTimeout to delay focusing to give you time to go back to the website.
Digital Ocean's input boxes are focusing fine for me. The undefined basically means that nothing is returned from your expression. For example if you type var a = 123 it'll still say undefined. Also there is no special CSS styling on these input boxes. You might be getting confused with the ones in their control panel.
UPDATE: OP was getting confused with Chromes default input styling.
You should try with document.getElementById('user_email').
document.getElementById('user_email').focus() ;
<input id="user_email">
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
...