Opera Mobile can't focus a text input with Javascript - javascript

Using Opera Mobile (tried 9.5 and 10), I cannot get the cursor inside a textbox using Javascript.
I have a barcode scanner so I wanted to have the textbox auto focused so that it's ready to receive the automated barcode input without the user having to tap. Having to tap is not really the issue, if the scanner tries to scan when a textbox is not in focus, Opera navigates to a local 'Welcome to Opera' page, even when the homepage setting is changed.
I've tried:
jQuery .focus()
jQuery .live()
Barebones Javascript .focus()
The autofocus property in the input tag
tabindex="-1" on the input tag
putCursorAtEnd() found here
Wrapping the above in a timer using setTimeout()
There's got to be a way to do ths with Opera Mobile. All other Javascript works no problem.

I've found a solution for this. I use an app called ScanWedge which inserts the scanned barcode into the textbox that has focus. The problem was I needed to get it in focus before the scan occured.
In the ScanWedge settings, there is an option to send a prefix with the barcode and an option to enable escapes in the prefix (needs to be ON), I simply use a prefix of \x0D which means an enter keypress is sent before the barcode.
This works because the focus() method highlights the textbox but does not insert the cursor, however if an enter key is pressed when the textbox is highlighted, the cursor is inserted.

Related

How to remove keyboard when there is no focus in input field in android mobiles

In my application I have three input fields. If I click on first input field and I did not write any validate data, and then I go to second input field -- it is showing a popup because of validation for change event. Here in this the keyboard that appeared when we click on the first input field is not removed when the popup showed up.
For this I removed the .focus for input field and
I tried like this also:
$('input').blur();
But there is no use I don't understand what is the exact problem it comes in Celkon device. Please suggest me any appropriate solution for this issue.

focus doesnt work on android

I am building an application for android, using jquery mobile (windows 7).
i have a function focus and using this function for example: you have a text field, and you want the text field to only accept numbers, and if you put in any string values an error will appear.
The problem is that when I run the app on mobile the focus function doesnt work. (it works, if you give it an string an error will appear, but then you cant click on other fields, and when you click on same field the error message won go away you have to remove it manually) but when I run the same code in my local host it works just fine.
I would use the autofocus and pattern attributes available in html5.
autofocus is simple enough in that the field its on will get the focus on page load and pattern allows you to specify a regex that this particular field must adhere to.
http://html5pattern.com/

localizing <asp:FileUpload>. IE problem

what i want to do is localize <asp:FileUpload> control. as far as i understand it is not possible, because input file is being rendered by a browser and there is no way to control it from the server.
so i do this: i create <asp:FileUpload>, make it transparent, create input text and input button and write
function browse() {
$('#fileupload').click();
}
on input button onclick event.
firefox and chrome does fine, IE8 - does not: it opens fileupload's "Browse..." dialog, writes it's value to input text (via $('#filepath').val($('#fileupload').val());), but when i start uploading, there is this problem: jQuery function before the Postback for FileUpload in ASP.NET
So my question is: is there any other (better?) way to override upload control (custom width, localized texts on button etc...), that works on every browser?
Thanks.
Have you tried uploadify so far?

Simple user authentication and helpful browsers

I am building on a standard form driven user login panel. Works well enough. All browsers recognize the pattern as a login panel and helpfully offer to store passwords. The way the user login information is then later recalled varies by browser. I focus here on FF, but the problem is universal.
Like any standard form, my login form comprises basic INPUT tags. W3C says that INPUT tags should fire ONCHANGE only ONBLUR. If I wanted to drive an OK (submit) button, say, that was disabled until some information was entered into my form, then W3C standard-compliance means that my OK button does not become enabled until the user clicks away from the field. I don't much like this behaviour and throughout my app, my INPUT tags are backed by JS code that fires ONCHANGE the moment a modifier key goes down. That's all dandy. However...
When FF recognizes my login form, it suggests to recall my login information. When I accept, FF helpfully fills in the two fields and ... my OK button remains disabled (because my keyboard driver, which detects the modifier keys and fires the ONCHANGE event, remains unaware of the form change; FF has pasted the information into the field without the use of the keyboard buffer).
Has anyone come across this problem before and discovered what event browsers fire when information appears "out of nowhere" in an INPUT field?
Thanks.
You're not the first, see:
Trigger javascript event when using Google auto fill on firefox
which suggests
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Read-only input in Android Webkit not working

I have a text input field in my web page that I am using to collect a date (via the jQuery Tools .dateinput). The user does not need to be able to type into the field. A dialog box appears when the field is clicked on. This is a problem on my Motorola Droid, because I don't want the soft-keyboard to appear when the field is clicked.
I have tried input.blur() on focus and also setting the field to disabled and readonly. Setting the field to disabled has undesired side effects. Setting the field to readonly works in everything but the Android browser. The browser seems to recognized the "readonly" attribute (or readOnly via javascript), BUT the field does not actually become readonly. When you click it, the soft keyboard still appears and allows you to change the field.
I suppose that this is a bug in the Android browser. Can anyone come up with a clever alternative?
I used a workaround - since I didn't need to actually edit in the input field (like you, I was popping a date picker), I changed to a span with similar styling. The code is kind of trivial once you have the trick, and it's really app specific so I don't have any really for you to see.

Categories

Resources