Read-only input in Android Webkit not working - javascript

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.

Related

Primefaces editable p:selectOneMenu chrome autofill problem

I am trying to cancel chrome autofilling on my inputs using autocomplete="off". I have a case of a <p:selectOneMenu> which have the attribute editable=true. Then, when I focus on the field, chrome autocomplete propose some past texts. How can I cancel this autofilling knowing that the attribute autocomplete is not available for <p:selectOneMenu>?
I have already tried to manage it through javascript, but the onfocus attribute concern dropdown click and not input area focus.
Unfortunately this is not PrimeFaces related. It is that Chrome AutoFill has been a mess over the years.
Here is the thread you want and look at how many times its been updated or answers changed just in the last 3 years.
Disabling Chrome Autofill
Basically Google has gone back and forth about allowing the developer to control what gets autofilled or not and for a while they completely ignore autocomplete="off" saying developers shouldn't decide what a user wants. Then they added some new auto-complete flags. Its a 100% mess in my opinion.

How do I stop browsers for suggesting inputs for fields?

I have an input text field, when user enters any alphabet/word, I have to suggest relevant topics.
The problem here is, the browser is also doing the same thing. It is showing previously entered data, which overrides the information shown in the site.
PFB the image, the circled black d, is a suggestion by browser (firefox in this case) and below list, (Git-Commands, Equals Method etc) is shown by me.
I want browsers to stop showing suggestions for this particular field.
How to do that?
The site is build in simple HTML and JavaScript.
Reference The searchbox on homepage on : mohitkanwar.com
PS: I have tried using autocomplete="off" . It does not work here, as it is not autocomplete, it is suggesting.
<input autocomplete="off">
Should do it. It will NOT work on login-fields, however, as most Browser vendors decided to ignore the setting there. Further Information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Use the autocomplete attribute, see http://www.w3schools.com/tags/att_input_autocomplete.asp for details.

open android and ios keyboard with uppercase using html

i am creating a web page for mobile devices. In that there are few input fields which require user to always enter data in uppercase.
I looked at few options like
text-transform property of css
It changes user input to uppercase but it also changes the placeholder. That doesn't looks good.
autocapitalize attribute for input
By setting it on, it allows keyboard to open in caps. But this doesn't seems to work for me. It works perfectly with textarea but not with input in android.
Is there any better way to achieve this?
try adding autocapitalize="characters" to input, it worked for me on Android, and it should work on other kind of devices as MDN web docs says here:
The autocapitalize attribute doesn’t affect behavior when typing on
a physical keyboard. Instead, it affects the behavior of other input
mechanisms, such as virtual keyboards on mobile devices and voice
input.
You should be able to bind to a keydown or keypress event (I'd use jQuery) and modify the input.
It won't affect the soft keyboard; maybe you can use this along with autocapitalize?
So just to add some more information for future users, here is an example where all displayed text will be in caps and the virtual keyboard will also show in all caps.
Note that custom keyboards like swift apparently do not work but the builti in ones do.
Changes are done through inputProps
<TextField
name={props.name}
value={props.val}
inputProps={{autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.doStuff}
/>

Unable to disable a required field in CRM 2011 online

The 'estimatedvalue' attribute of the opportunity entity is marked as being required. I have it on the form, but have marked it as being disabled, both through the Form UI customization, as well as using javascript, but some other javascript is re-enabling the form after I've disabled it.
The best solution I have so far is disabling the attribute from the callback of a timeout: setTimeout("CommonLib.setDisabled('estimatedvalue', true);", 1);. When the field loads, it loads as disabled, then some other js is enabling the field, then the callback from the timeout runs and disables it again, so you see the field go from grayed out, to black, to grayed out.
There are two other attributes that I've disabled and they stay disabled, but the estimatedvalue is the only one that is actually required, so I'm guessing it has something to do with that.
Any ideas as to what is re-enabling the field?
I dont think it has anything to do with the requirement level but #Anwar may be one explanation. Could you double check if some other custom script might be enabling the field?
I just tried following with the task where subject is the required field and it seems to be working fine:
Xrm.Page.ui.controls.get('subject').setDisabled(true);

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/

Categories

Resources