I'm working on a mobile web app that requires an input field that wraps text. So I
thought I'd use div with contenteditable.
JSFiddle: https://jsfiddle.net/9r5u7fgs/
<div
class="text-field"
contenteditable="true"
/>
The "input" field should only be 1 line, so when the user presses "enter" I
want to trigger a POST request with the field contents. I don't want any
newlines in the field.
I thought about listening for keyup and checking the keyCode. This works
correctly on desktop.
document.addEventListener("keyup", function(e) {
console.log(`e.keyCode=${e.keyCode} - e.key=${e.key}`);
if (e.keyCode === 13) {
sendContents(e.target.textContent);
}
});
However on mobile browsers, I get different behavior.
First, the keyCode is always 229 for letters.
Second, I have to press enter twice to get the expected keyCode.
This is what Android 13 Firefox 108.2.0 shows if I type f <enter> <enter>.
e.keyCode=229 - e.key=Process
e.keyCode=229 - e.key=Process
e.keyCode=13 - e.key=Enter
Android Chrome 108.0.5359.128 prints something similar.
e.keyCode=229 - e.key=Unidentified
e.keyCode=229 - e.key=Unidentified
e.keyCode=13 - e.key=Enter
I found this: Keycode value is return as 229 for all keys
but it didn't really provide a solution.
Is there a way to detect when a user presses "enter" the first time in a div
contenteditable? Is there another event I should listen to?
Reminder this is for mobile web browsers, not desktop.
Related
Found similar threads, but nothing seems to work for me.
I have a simple text input in my Vue app that, needs to be blurred once the user clicks Enter of whateve the "Return" button is on their keyboard. This is all fine and well on Desktop and iOS, however on Android the Enter button changes to Next and will not follow the behavior I set for it.
I've tried a bunch of different keycodes which I've found in different thread answers and so far, none of them match the Next button on Android.
This is what my code looks like:
<v-text-field
label="My Input"
class="input-field"
v-model="myInput"
#keydown="preventUnwantedEnterDefaultBehavior"
/>
...
private preventUnwantedEnterDefaultBehavior = (evt) => {
// none of these work for next
if (evt.keyCode === 13 || evt.keyCode === 261 || evt.keyCode === 229 || evt.key === 'Unidentified') {
evt.target.blur();
}
}
Take note that the Next buttons default behaviour is to skip to the next input. I do not want this to happen. I want simple blur of the current input, regardless of what the Enter button is labelled as.
Alternatively, if this is really a near impossible task, how can I force the Android's Next button to just be your good ol' Enter button of code 13 as it on all the other platforms?
Have you tried using keycode 66? As described in the android documentation:
https://developer.android.com/reference/android/view/KeyEvent#KEYCODE_ENTER
If that doesn't work you could try to handle the #keyup event for the same codes.
I have two inputs, when the first recieves an enter keyup, it focuses to the next one (see the script tag). On Chrome (49) on Android (6.0.1), when you press the -> button on the right-bottom of the keyboard (standard keyboard), it keeps the last word typed in the keyboard and carries it over to the new input.
Is there a way to prevent this or get a similar effect without that behaviour?
<input type="text" id="first-input"></input>
<input type="text"></input>
<script>
var first = document.getElementById('first-input');
first.onkeyup = function(event) {
if (event.keyCode == 13) {
first.nextElementSibling.focus();
}
}
Running example here:
https://jsfiddle.net/jmn0pze7/1/
I found a solution to this issue on this question: Android Chrome input onkeydown
Clear the text on input focus
$('input').val('');
I wanted to have a placeholder on my date input, <input type="date" id="birthday"> however due to the W3C spec we can't do this so, I have amended my item to a text input <input type="date" id="birthday"> and on focus I change the input type to date.
$(document.body).on('focus', '#birthday', function (event) {
event.preventDefault();
if($(this).attr('type') !== 'date') {
$(this).attr('type','date');
}
});
This is fine in the desktop browser (where supported), on Android, iPhone 4 and other devices however on the iPhone 6 when the input has focus we still get the text keyboard and not the date selector keyboard for the input. Does anyone have any ideas of how I can get the correct keyboard to be shown?
I know it may be better to use or write a JS datepicker but I would like to use the native HTML5 date input. When the item loses focus and I click back on it the correct keyboard is shown. I tried to include code so when we gain the focus, we create a blur event then reintroduce the focus or a click event but this doesn't seem to work (see below). Has anyone had this problem before?
$(document.body).on('focus', '#birthday', function (event) {
event.preventDefault();
// this doesn't work
if($(this).attr('type') !== 'date') {
$(this).attr('type','date');
$(this).blur();
// perhaps this should be in a callback?
$(this).click();
}
});
I have an application that does something (eg alert) each time a spacebar is pressed. This works fine if I am not using JAWS screen reader. However, once I load JAWS screen reader, it does not execute alert when I press the spacebar. I need to use JAWS so I need this to work. Here is the code snippet.
$(document).keypress(function(event) {
var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
if (chCode == 32){ //32 is keyCode for spacebar
alert("spacebars!!!");
}
});
From my observation, it seems JAWS grabs the keyboard focus and wouldn't allow the spacebar event to fire. JAWS always reads "Space" when I press the spacebar but the alert event does not fire. How can I still get the alert or doSomething() to fire when the spacebar is pressed? How can I take control from JAWS or maybe share keyboard control with JAWS such that even though JAWS reads out the character I pressed (in this case Spacebar), it will allow my event (alert) to fire. Thanks.
More code:
$(document).keypress(function(event) {
var cc= ('charCode' in event) ? event.charCode : event.keyCode;
if (cc == 32)
{
spArray.push(Number(new Date()));
}
});
In general, it is not advisable to over-ride screen readers, even if they let you. There are quite a few JAWs keyboard commands (in conjunction with INS) that use the spacebar, and you'd probably lock those commands out.
If the area is primarily formed controls or interactive widgets then you could wrap it in an element with role="application". That puts a (windows) screen reader into 'forms' mode, where keys are passed through to the web-page.
Do not wrap everything in role="application", just the interactive area.
Update: With more information, this is about an audio-based capture where the user triggers an audio file, then triggers something again to set a time and pass the capture.
Using a native button, Jaws will pass through the use of enter (not sure about space, that isn't the usual 'activate' key). I'd suggest either checking for enter key (charcode 13 I think), or even onclick should work. On a native button/link it works across screen readers.
$(document).click(function() {
spArray.push(Number(new Date()));
});
Assuming that's in the right location so that it doesn't become active until needed. (JS isn't my strong point, but go with the enter key or onclick.
An event handler declared like this works in our application:
doKeyDown_: function (evt) {
var key = evt.keyCode || evt.which;
//arrows
if (key == 27 || (key >= 37 && key <= 40)) {
try {
if (key >= 37 && key <= 40) {
this.handleArrwos(evt);
} else {
this.handleEsc(evt);
}
...
Although it is based on the ZK platform, the inner engine is still JQuery. Please note that the event is keyDown (not keyPress) and how the pressed key is detected. The example is for Esc and arrow keys - Space should be no problem.
As for accessibility, our etire page is declared as role="application", since the entire content is a dynamically generated page, it's really an application. Only this way Jaws doesn't eat up about any possible keys combination.
I have an input field which I do not want users to paste any values in it. I am using the following jQuery code and it works fine on desktop Browser and iPhone Safari. The problem is it's not working on Android browser.
$('#no_paste').bind("paste", function(e) {
e.preventDefault();
});
Here's the fiddle
I've tested this on Galaxy SIII and Android browser doesn't seem to send the
paste event. However, it still sends the input event after something was pasted.
If user is typing into a field he will fire one input event for each letter. However, if he is pasting, input event will fire only once for the whole string that was pasted. Basing on this observation we can block pasting like this:
$('#ie').bind("input", function() {
var previousValue = $(this).data('old_value') || '',
newValue = $(this).val();
if((newValue.length - previousValue.length) > 1) {
$(this).val(previousValue);
}
$(this).data('old_value', $(this).val());
});
You will find JSFiddle here.
Please note that this will also block autocomplete and all other strange input techniques that work in a similar fashion (I don't know about any).