Changing input method on the fly - javascript

I have a simple form on laravel which will take name and email only and submit it to database. Name will be in Japanese. I can validate it in controller.
However, when I am using chrome; after inserting the name in Japanese; I press TAB key and input method automatically changes when cursor is on the email field.
But when I am using edge the input method doesn't change automatically. I have to manually change it.
Is there any way to automatically change input method on the fly regardless of the browser? Is there any JS function and/or Laravel function that I can use?

I solved the problem. The trick is using css.
In the fields I need English input, I put ime-mode inactive and type = tel.
In the fields I need Japanese input, I put ime-mode active.
It worked. my code was something like this.
<input type="text" name="number" placeholder="enter your name" style="ime-mode: active;">
<input type="tel" name="email" placeholder="enter your email" style="ime-mode: inactive;">

Related

Adjusting dynamic input fields when changing the type of the input field

I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.

Chrome email field autocomplete options not showing for my website

As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?
Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">
The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.
The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp
Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>

Is there a way for a form to identify only one required field

For instance in this example;
<form>
<input type="email" name="email" id="useremail" placeholder="Email Address" required> <br>
<input type="tel" name="phone" id="userphone" placeholder="Phone Number" maxlength="10" required> <br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
Reword: Can at least one of the form inputs be mandatory, both is allowed as is one or the other but not none. In the above example, the user needs to have at least one form of communication whether that be phone number or email. They can have both however, but not none.
If so, how would you go about this?
You can easily capture the change events from the inputs and set the required attribute accordingly.
Like this:
var email = document.getElementById('useremail'),
phone = document.getElementById('userphone');
function onchange(){
email[phone.value?'removeAttribute':'setAttribute']('required','required');
phone[email.value?'removeAttribute':'setAttribute']('required','required');
}
email.addEventListener('change',onchange);
phone.addEventListener('change',onchange);
jsfiddle
Is it possible to somehow/somewhere be able to identify that the user has inputed something in EITHER the email or phone number field. So that on submit it doesn't show "this is required".
1) No. If you use HTML5 required on a field then that field is required. There is no way to specify interdependence.
2) Yes. You can use client-side javascript validation, generally hooked to a form submit event to do as-complex-as-you-like validation. Prevent the submit by returning false from the event handler if you don't pass validation.
3) Yes. You can do validation that can be as complex as necessary on the server when you have received the submitted form, and return directly to the form if something is wrong.
3b) You Must do validation on the server, even if you have great client-side javascript validation, otherwise I will buy things from your site for one penny. You must not trust the client.

Disable Safari 7.0.2 keychain password save

How can I disable safari from saving a user/pass from a form using html or javascript?
I've had this issue that came up with safari 7.0.2 where you can save a user/pass to a keychain and when you goto that same form it automatically overrides those fields? Personally I think this is horrible behavior. I don't think fields should ever be overridden.
I've created an isolated version that you can demo the issue here.
http://dev.davidsalazar.com/issues/safari-autofill/
Steps to replicate (ensure you use latest safari 7.0.2)
Type and user/pass click save. It should prompt you to save to keychain, accept the save.
Now click on the link load random data and you will notice that safari will now be overriding those fields with your perviously saved fields.
Workaround: create another (fake) password field and Safari is probably confused by it - autofill will be "disabled" in this case
tested in Safari 7.0.2 and 7.0.3
demo (with red fake password): http://js.pejsa.info/~jam/safari-autofill/
<form method="post" autocomplete="off">
<input type="text" name="username" id="username" value="abc" />
<input type="password" name="password" id="password" value="def" />
<input type="submit" name="submit_btn" value="Save" />
<input type="password" id="fakePassword"
style="border:0;width:10px;height:10px;background-color:red;" />
</form>
it is not possible due to new behavior in all browsers - autocomplete="off" is now ignored
for details see http://raesene.github.io/blog/2014/04/17/changing-times-the-end-of-autocomplete-equals-off/
i search this problem before day for my project. and finally i found the solution wit plug-in below.
this plug-in work structure like this. It get your input and clone it.
Use this clone and create same input properties and clone it another hidden input. After that remove your orginal input and put hidden and cloned input same position.
It's reason that. Modern browser (has keychain) control input (type password) when page loaded and mapped over DOM. After page load plug-in get input and clone and remove orginal input. this operation changes DOM mapping. So brovser cannot access this control when page redirect. So don't suggest yo to save password.
You can use this plug-in for this problem.
Notes:
If you use another plug-in like me. Forexample jquery-keyboard plug-in for password secure enter. you shoul modify your initkeyboard method. becasue keyboard control your input and init near this input. you could change this init method like below
init keyboard changing
before
var _inputwidth = $(elm).parent().find('input').width();
after
var _inputwidth = $(elm).parent().find('input[type=text],input[type=password]').width();
because plug-in output like this
<input type="hidden" id="txtPass" name="txtPass" spellcheck="false" autocomplete="off">
<input type="text" id="txtPass" name="txtPass" spellcheck="false" autocomplete="off">
If you have any keypress or keydown event initialize for this input put this codes after plug-in init. because this plug-in change DOM mapping
this plug-in usage like below
$('input[type=password]').disableAutocomplete();
this is creator desctiption
This jQuery plug-in enforces the autocomplete=off HTML attribute on
password (and other) fields. Recent browsers have chosen to ignore
this attribute in favor of user preferences. However, some financial
(and other) institutions may have good reasons to enforce this
practice.
jQouery Disable AutoComplete
Old comment
I have a page with 2 inputs. one of these input type password, other text (username password form). Safari doesn't work with autocomplete="off". I use for this problem two inline hidden input. These inputs have generic names as below. My original username password input has different name so Safari first looks for a keychain to get or set these inputs. You can use this solution to prevent Safari using a keychain for your secure page.
<input type="text" name="Username" style="display:none;"/>
<input type="password" name="Password" style="display:none;" />

Show/Hide previous form field entries

I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />

Categories

Resources