Why does this work on every other device and every browser unless that browser is on an iphone (iphone 4 in this case)?
<script type="text/javascript" lang="javascript">
function FocusTextBox()
{
var text = document.getElementById("textBox_Search");
text.select();
text.focus();
}
</script>
Also tried jquery:
$("#<%=textBox_Search%>").click(function () { ("#<%=textBox_Search%>").Select() });
I'm looking for this behavior after postback/end of button click event. Example screenshot:
FYI: The reason this behavior is required: The mobile devices have wireless bar-code scanners. Need the ability to scan items over and over again without touching the screen. Manually clearing out the previous item in the UPC box isn't going to work. Needs to do it automatically. It should just select what was previously entered so that it will be erased with the next item scanned. The scanner simply performs a keyboard enter function with each scan. This works well and the button is clicked because it's the default button on the page. But, the problem is that on an iphone, the text is not selected again as in the picture above.
I've also tried just doing a .select() from codebehind after the button click. I've tried registering the javascript and executing it last in the button click event. All of those things work on every device except an iphone.
Thinking of forcing my employees to buy Androids. lol
This simply won't work on a iphone. Reference this answer:
How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?
This is typical Apple thinking: Sacrifice usability for user friendliness. Not surprised this was the ultimate answer. If anyone ever finds a work around, please let me know!
If you are like me and want more confirmation that this is indeed the unfortunate answer: https://discussions.apple.com/thread/5187540
For highlight your text on recent navigators (http://kimblim.dk/css-tests/selectors/) like the iPhone, you should use the css3 pseudo classes :focus, ::selection and :hover and apply to them a specific style.
For example, if I want to highlight <p id="textBox_Search">Text</p> in yellow on select, the css will be :
#textBox_Search::selection { background-color: yellow; }
More informations here about css3 pseudo classes : http://www.w3schools.com/css/css_pseudo_classes.asp
You can also do it with jQuery, like following :
$(function(){
$('#textBox_Search:selected').css('background-color', 'yellow');
});
Details of the .css() function in jQuery : http://api.jquery.com/css/
NB: JQuery is the best way cause it works on every navigators instead of raw javascript and css, who are a bit hard to compatibly between navigators. A good way to learn how to use this framework : http://learn.jquery.com/
Related
EDIT: this feat is impossible. since then I have given up. I shall not delete this question, but rather leave it up right here so future users can see a relevant result to their query on google regarding a similar thing
Goal: Either make a textarea bring up the virtual keyboard when focused(with js) OR make a input[type=text] have multiple lines AND bring the virtual keyboard
(I believe answered here but with unsatisfactory results.) (If anyone knows of fully compatible ways to multiple-line-ify an input[type=text] please tell me)
Expected results: virtual keyboard popup when focusing the input OR textarea fields (via javascript with no user trigger).
Real results: caret appears in text field but keyboard remains unseen.
Here's what I'm trying on a textarea:
document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent(click);
Please don't make irrelevant comments about my code organization
#WaisKamal can you show me your code since you said it works?
HTML(no CSS):
<textarea>textarea</textarea>
<input type="text" value="input" />
<script>
//document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent("click");
document.querySelector("input").focus();
document.querySelector("input").click();
</script>
You can use inputmode to determine how a virtual keyboard behaves
<textarea>textarea</textarea>
<input type="text" value="input" inputmode='text'/>
<script>
//document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent("click");
document.querySelector("input").focus();
document.querySelector("input").click();
</script>
Edit
I'm still testing this out, it seem to give some mixed results in the jsfiddle that I'm currently testing right now, sometimes it works and sometimes it does not
*Edit 2 *
It seems to have the same results without specifying the inputmode It does not work the first time the page loads but if I click somewhere on the page, it works every time I click run.
I'm only speculating here but it seems like the keyboard does not pop up without the page receiving some user interaction first, maybe this is intentional for security reasons but I didn't find any docs saying so.
As for you other question you can give a div or other container element contenteditable to have multiple rows / any dimensions you want.
-
Here is another questions and some answers to the same problem though a bit old, Show virtual keyboard on mobile phones in javascript
-
All in all it does not seem possible so show a virtual keyboard without some user interaction.
I am trying to make an on/off toggle button using a checkbox input type and using CSS to change the style to have it look like the ones the iPhone uses for my webapp. Currently my button works great in all browsers however when I load it up on my iPhone it doesn't work, when you click the button nothing happens. At first I thought it might be a problem with my jQTouch or javascript but I removed all my CSS so I could just test the functionality and it worked fine. So I know the problem is somewhere in my CSS. Any idea why this CSS code doesn't allow me to click the button. (The graphics and everything work and look fine, just nothing happens when I click the button). Any ideas? Thanks.
Code is in this fiddle:
http://jsfiddle.net/4gjZX/4/
change to onclick
add an empty onclick to the label - known issue on iDevices
DEMO
However why have inline event handlers when you use jQuery anyway???
Also why the data- in the ID, it is normally used for attribute names
You may get it works by making some css changes:-
label { cursor: pointer; }
For iOS, instead of showing the keyboard any time you click inside a textbox, can I create a button to toggle the keyboard on and off so users can have control over when to display the keyboard? What's the javascript function for it?
PLease note I want to do it in javascript not objective-C.
Thanks,
I'm fairly certain there isn't a dedicated JavaScript method for controlling the keyboard, but you might be able to fake it with jQuery. Assuming you have a text input like this:
<input type="text" name="formula"/>
Your JavaScript code would look something like:
$(function(){
$("#formula").focus(function(){
$(this).blur();
/*
Put code here to bring up your custom keyboard. Update
the value of #forumla as symbols are pressed.
*/
});
});
If you want to add a button to your custom keyboard that brings up the traditional keyboard you would want it to execute:
$("#formula").focus();
Lastly, if you only want the keyboard that pops up to default to the numbers keyboard, which sounds like it could be a nice added touch for you, you can tell iOS the element is for numbers number by changing your element to look like this:
<input type="number" id="formula"/>
You should be able to accomplish what you're trying to do with these tips.
#George: I finally decided that I don't need the regular textbox because I have a customized keyboard anyway. That way I won't have to worry about the keyboard popping up when touching my 'customized' textfield.
Anyway, thanks for your effort.
I have a site built using JQTouch and want to add the little cross
buttons within text input fields to clear out text on press.
I've tried emulating Google's technique from their google.com iPhone
site. Also I've read about that approach over here
little 'x' in textfield input on the iphone in mobileSafari?...
I have this partially working. But whether and when a press on the
cross button is registered seems unreliable.
I've created minimal code to test this:
with JQTouch -
http://hogtownconsulting.com/clearquery/index.html
without JQTouch (or any other JS libraries) -
http://hogtownconsulting.com/clearquery/index-no-js.html
I'm not certain that it's an interaction with the JQTouch library
that's causing these problems. But the version without JQTouch does seem more responsive to taps on the cross button. Any suggestions on how I can get this feature working
properly would be much appreciated. Thank you, Patrick
You get that little X automatically if you name your input type = search.
<input type=search name=s>
This article will help you plenty.
CSS Tricks for WebKit
If you don't want that input to be a type = search, then you will have to fake it out a bit.
1. create a div and round it using css.
2. put your input in there, and remove webkit decoration, shading etc.
3. put a SPAN with your X image in to the right of the input. add an onclick to that image which clears your field.
<div><input type="text" id="thing"/><span onclick="clrField();"><img src="x.gif"/></span></div>
I am currently working on a Javascript program for my company (Leader Technologies) that is used to register products for Logitech. The URL for that is :
http://wwwtest.onlineregister.com/logitechreg/
My program looks totally fine on everything single web browser (including IE 6) that I have tried except Safari 4. On Safari 4, after a location, language and product category have been selected, when the actual product menu is clicked (id=WHPR), the div responsible for displaying the product is shown, but the drop-down selections are still visible. On all other browsers, the drop-down and the possible selections inside it in hidden (which is the intended behavior.)
Directly, my question is can I hid this drop-down successfully in Safari 4 WITHOUT completely emptying out the drop down and then repopulating it with only the selected value? I would rather not do this if at all possible, but if it's the only way to accomplish my goal then I can change the site additionally.
I believe the problem is where I set the listeners on the <select>:
<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">
Thank you all very much for taking the time to help me. I really appreciate all the help available on this site.
-Brian J. Stinar-
Not to pick on your style, but attaching listeners inline like you're doing is not very clean. Why not take advantage of jQuery's ability to deal with any browser discrepancies? The page you refer to is already loading it.
See http://docs.jquery.com/Events/bind
I think it's some kind of a bug in Safari - for example if you do .focus() nof for the DIV but for another input element like a textfield, then after clicking the selectbox both would have the focus (or actually, the focus would stay in the selectbox and the textbox would only seem to have the focus by having thicker border than usual).
Anyhow quick and dirty methot to achieve the goal would be removing the selectbox from the page (display: none) and then bringing it back (display:inline).
replace the this.blur() with the following command
this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);
If you don't use a delay then it doesn't work - the removal and retrieval of the element need to be in different scopes.