1

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:

enter image description here

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

maplemale
  • 2,006
  • 21
  • 35

2 Answers2

1

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

Community
  • 1
  • 1
maplemale
  • 2,006
  • 21
  • 35
-1

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/

Natuu
  • 71
  • 4
  • I realize I may have used the words "highlight" but if you look at the subject of my post and the JS function, I'm not literally trying to highlight text a different color. I'm trying to select it. PS: jquery is no better. `$("#<%=textBox_Search%>").click(function () { ("#<%=textBox_Search%>").Select() });` Again, works on every browser except mobile safari for iphone or chrome for iphone. – maplemale Nov 03 '13 at 01:23
  • Uh, sorry for my mistake, I didn't understood what you were meaning by "highlight" and I'm sorry for my answer who eventually doesn't match your problem at all. Then can you reform your question please ? Is it for do something like copying a text inside an input ? – Natuu Nov 04 '13 at 01:47
  • No worries mate! Thanks for responding! :) Altered my question with a screen shot and brief explanation of what I'm trying to occomplish. – maplemale Nov 04 '13 at 18:14