Before explaining the issue, I will explain my requirement and why I chose to create this custom component.
I have a requirement where whenever the user enters something in textarea, the textarea's height should increase/decrease automatically based on the entered text.
Since, textarea adds a scrollbar when content is increased but not stretch automatically. I thought to use contenteditable div instead of textarea. But contenteditable div has a problem in mobiles that we can't tap on the entered text.
So, I created a custom component where whatever I add in textarea, the same content will be added in a hidden div. and later the textarea will take out the height of the hidden div. This is working fine.
Here is the Fiddle
But I have a small problem that whenever the user is pressing "enter", this component is unable to adjust the textarea's height. and later if I press any letter, the textarea is adjusting properly. The problem is with just detecting "Enter" key that pressed at the end of the content (if the user pressed "Enter" key in mid of the content, this component is working fine).
Here is the component's HTML code:
<div class="wrapper">
<div class="textarea-clone"></div>
<textarea></textarea>
</div>
Try something like this ...
$('textarea').on('keyup', function (e) {
if(code == 13) { // keycode == 13 (enter)
$('.textarea-clone').text($(this).val());
}
});
EDIT:
This works for me and only resizes on enter key presses, thinking about it that's likely not your intention but this tests that specific scenario.
Maybe this is a browser thing, some browsers don't correctly implement all the events right, maybe try attaching to change, keypress, and keydown too, experiment and see what you get.
expanding on my comment to include overflow lines:
<textarea id=ta></textarea>
ta.oninput=function(){
this.rows=this.value.split("\n").length;
while(this.clientHeight < this.scrollHeight-2) this.rows=this.rows+1;
};
this is a good setup because it adjusts to pastes, long text, enter keys, and whatever else makes it need to be taller.
i think you might need to adjust the border+padding allotment.
2px is default on fiddle (0px padding + 1px each border) and works perfect.
obligatory fiddle: http://jsfiddle.net/aqfkqc8y/6/
This question already has answers here:
prevent mobile default keyboard when focusing an <input> from showing
(9 answers)
Closed 5 months ago.
I am developing the front end site for a coupon company, and I have a page where the user only needs to input phone number and $$ spent. We came up with a fun on-screen keyboard built in Javascript, that is easy to use, and fast. However, I am looking for a solution to stop the soft keyboard from popping when the user focuses and enters text/numbers in those fields.
I know about the "number/phone/email" type attributes that HTML5 came up with. However, at the risk of sounding crazy, I really want to just use my on-screen keyboard.
Note: this web site is mostly targeted to tablets.
Thanks.
Scott S's answer worked perfectly.
I was coding a web-based phone dialpad for mobile, and every time the user would press a number on the keypad (composed of td span elements in a table), the softkeyboard would pop up. I also wanted the user to not be able to tap into the input box of the number being dialed. This actually solved both problems in 1 shot. The following was used:
<input type="text" id="phone-number" onfocus="blur();" />
Since the soft keyboard is part of the OS, more often than not, you won't be able to hide it - also, on iOS, hiding the keyboard drops focus from the element.
However, if you use the onFocus attribute on the input, and then blur() the text input immediately, the keyboard will hide itself and the onFocus event can set a variable to define which text input was focused last.
Then alter your on-page keyboard to only alter the last-focused (check using the variable) text input, rather than simulating a key press.
For further readers/searchers:
As Rene Pot points out on this topic,
By adding the attribute readonly (or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.
With this method, you can avoid popping up the "soft" Keyboard and still launch click events / fill the input by any on-screen keyboard.
This solution also works fine with date-time-pickers which generally already implement controls.
I'm very confused as to why no one has put this... maybe I'm misunderstanding the question but,
<input inputmode="none" />
Those answers aren't bad, but they are limited in that they don't actually allow you to enter data. We had a similar problem where we were using barcode readers to enter data into a field, but we wanted to suppress the keyboard.
This is what I put together, it works pretty well:
https://codepen.io/bobjase/pen/QrQQvd/
<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" />
<span id="fakecursor" />
<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />
#hiddenField {
height:17px;
width:1px;
position:absolute;
margin-left:3px;
margin-top:2px;
border:none;
border-width:0px 0px 0px 1px;
}
#cursorMeasuringDiv {
position:absolute;
visibility:hidden;
margin:0px;
padding:0px;
}
#hiddenField:focus {
border:1px solid gray;
border-width:0px 0px 0px 1px;
outline:none;
animation-name: cursor;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes cursor {
from {opacity:0;}
to {opacity:1;}
}
// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
// silently shift the focus to the hidden select box
$("#hiddenField").focus();
$("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});
// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
// get the current value of the readonly field
var currentValue = $("#visibleField").val();
// and append the key the user pressed into that field
$("#visibleField").val(currentValue + e.key);
$("#cursorMeasuringDiv").text(currentValue + e.key);
// measure the width of the cursor offset
var offset = 3;
var textWidth = $("#cursorMeasuringDiv").width();
$("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));
});
When you click in the <input> box, it simulates a cursor in that box but really puts the focus on an empty <select> box. Select boxes naturally allow for keypresses to support jumping to an element in the list so it was only a matter of rerouting the keypress to the original input and offsetting the simulated cursor.
This won't work for backspace, delete, etc... but we didn't need those. You could probably use jQuery's trigger to send the keyboard event directly to another input box somewhere but we didn't need to bother with that so I didn't do it.
example how i made it , After i fill a Maximum length it will blur from my
Field (and the Keyboard will disappear ) , if you have more than one field , you can just add the line that i add '//'
var MaxLength = 8;
$(document).ready(function () {
$('#MyTB').keyup(function () {
if ($(this).val().length >= MaxLength) {
$('#MyTB').blur();
// $('#MyTB2').focus();
}
}); });
I am facing the same issue, I am able to hide android keyboard even focus is in textbox by just adding one css property
<input type="text" style="pointer-events:none" />
and it works fine...
I am fighting the soft keyboard on the Honeywell Dolphin 70e with Android 4.0.3. I don't need the keyboard because the input comes from the builtin barcode reader through the 'scanwedge', set to generate key events.
What I found was that the trick described in the earlier answers of:
input.blur();
input.focus();
works, but only once, right at page initialization. It puts the focus in the input element without showing the soft keyboard. It does NOT work later, e.g. after a TAB character in the suffix of the barcode causes the onblur or oninput event on the input element.
To read and process lots of barcodes, you may use a different postfix than TAB (9), e.g. 8, which is not interpreted by the browser. In the input.keydown event, use e.keyCode == 8 to detect a complete barcode to be processed.
This way, you initialize the page with focus in the input element, with keyboard hidden, all barcodes go to the input element, and the focus never leaves that element. Of course, the page cannot have other input elements (like buttons), because then you will not be able to return to the barcode input element with the soft keyboard hidden.
Perhaps reloading the page after a button click may be able to hide the keyboard. So use ajax for fast processing of barcodes, and use a regular asp.net button with PostBack to process a button click and reload the page to return focus to the barcode input with the keyboard hidden.
I could not use some of the suggestions provided.
In my case I had Google Chrome being used to display an Oracle APEX Application.
There were some very specific input fields that allowed you to start typing a value and a list of values would begin to be displayed and reduced as you became more specific in your typing. Once you selected the item from the list of available options, the focus would still be on the input field.
I found that my solution was easily accomplished with a custom event that throws a custom error like the following:
throw "throwing a custom error exits input and hides keyboard";
This might help others, that just want to disable the soft keyboard in general. I managed to disable the soft keyboard not by javascript but by installing a new keyboard layout called Null Keyboard
I have an Input Element type='text' which gets into a buggy state in iOS Safari, such that the input element appears focused and dispatches keyup events but does not update the value of the field; no new characters are visible as the user types. In a website I am building I trigger this state after resizing** a focused text input element***. I have made a jsfiddle which reliably reproduces the bug:
<input id='ipt' type='text' style='width:250px;height40px;'/>
<script>
var ipt = document.getElementById('ipt');
ipt.addEventListener("keyup", onkeyup, false);
function onkeyup(e){
ipt.style.width = '100px';
ipt.removeEventListener("keyup", onkeyup, false);
}
</script>
To reproduce the bug:
Open http://jsfiddle.net/55dth/embedded/result in iOS Safari
Focus the input element with a tap
Pinch zoom to show the full width of the input (necessary to trigger bug)
Type something
I would like to understand why it is getting into this buggy state, and how I might be able to avoid it. It may well involve being in an iframe and the document settings. I have to be in an iframe, and I need to change the width of the text field.
Or how to get out of this state. I can detect that I am in the state, by listening for keyup and checking the value at the insertion point compared with the key value in the event. I tried toggling readonly, resetting the value, focus(), toggling inputmode...
** I want to resize the element - so that there is more horizontal space to type when the keyboard is up.
* I am pretty sure that other conditions are necessary to get into this state, however I am not sure of the exact conditions.
I'd like to be able to give a formfield (via javascript or otherwise) focus while it's out of the viewport, without having the scrollbar move to shift it into the viewport.
Is that possible?
I know & understand that it'll pop into the viewport as soon as the user starts typing - that works fine for my use case.
Simply done by creating a JavaScript function onLoad in the body tag and sending the focus to the form field doesn't matter if it's out of viewport.
HTML
<body onload="FocusMe();">
<input type="text" id="FocusTo">
JAVAscript
function FocusMe () {
document.getElementById("FocusTo").focus();
}
Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?
I have 2 form fields;
1. Text box (say Name)
2. Select list/Dropdown (Say State)
My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?
Thank you.
I just ran into a very similar problem, not sure if my solution will work for you.
In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.
To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.
Hope this helps!
I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input
<input type="hidden" id="blurInput" />
and javascript code handler for focus event:
$element = $(event.target);
if($element.is('select')) {
$('#blurInput').blur();
$element.focus();
}
In case you want just to blur input field another solution works perfect, but between input and select it fails
document.activeElement.blur();
$('input').blur();