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/
Related
I am still a javascript beginner and tried to integrate the virtual keyboard into my project. This already worked without problems, unfortunately I have the problem as soon as I use an input via this keyboard in my input field type Search that the search does not work. If I enter the input directly with my keyboard the search works fine. What can be the reason for this? Also when I use the virtual keyboard to enter an input the -webkit-search-cancel-button doesn't work either or is only displayed when I move the mouse over this area.
<input type="search" placeholder="Searchbar">
Code example: https://codepen.io/siad/pen/jOYLJVW
Unfortunately, I have not yet been able to find the error for this.
I am currently working on an Angular web-application.
This application consists of two single-page-applications:
- Login-Page, accessible over "domain/login.html", containing login-logic.
- Application-Page, accessible over "domain/", containing the concrete application.
If you try to access "domain/", the server redirects you to "domain/login.html", if you are not logged in yet. Otherwise you will get the Application-Page (no redirect).
In the concrete application there is a Change-Password-Page, where you have to enter the old password and the new password (twice).
The problems start, if you say "save password" on the login-page. The saved password is automatically filled inside the "Old-Password" field.
Also there is another page having a text field and a password field directly after each other (where the text-field is for a phonenumber) and the browser inserts the username into the "phonenumber"-field and the password inside the password field. This is really strange, as the fields have different names and ids and are even on another page (again one is "/login.html" and one is "/")
As this behaivor is incorrect i would really like to disable it. However I was not able to do that until now.
What i tryed:
autocomplete=off, for form and input-tags. This seems to be ignored by most modern browsers.
Two hidden (display:none) input-fields (text + password) on first position. Seems to work for Firefox, but Chrome and Opera still give you the possibility to autocomplete the fields.
Use type="text" for password-field and change it to password inside javascript-code. Again Opera and Chrome still give possibility to autocomplete those values.
So I am looking for a (clean) solution to turn off the wrong autocompletion.
Is that somehow possible?
I have been encountering this issue lately, specifically with chrome. It seems that
autocomplete="off" || autocomplete="false"
are not being picked up anymore by Chrome (or most other browsers as far as i'm aware). I found the following sources helpful :
Chromium (which i believe is what a lot of Chrome is based on) has the following code that shows the regex that is used when finding fields to populate with Chrome's autocomplete:
https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262
I feel like they only other work around that I have found is to follow these conventions :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Or at least make sure that you give an attribute that's disimilar enough from the above list so it that wont get picked up by autocomplete features.
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.
I have a script in a web application of mine which forces users to type only numbers into certain text fields. However, when the appropriate text field is selected, the script blocks ANY keyboard input other than number keys and tab. I don't want to limit the user from being able to use their browser's or my app's keyboard shortcuts just because they are typing in a numerical field. (Also, I'd rather not just validate the field instead of preventing number input, my app updates the page based on the numerical input live, so it wouldn't be as nice.)
Can someone please help write/find a little script for me? A simple variation of these numbers-only scripts that can be overrided when a modifier key is pressed is enough (and I guess the overrided character would have to be deleted, too).
I'm not going to write a script for you, but I'll give you some pseudo-pseudo-code:
input = input.replace(/\D/, '');
Try YAV, Javascript validator library.
I think you need mask feature.
Look at field Custom: from this example
http://yav.sourceforge.net/en/example_7.html
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.