I'm using a vaadin TextField on mobile and want to change the input elements 'type' attribute to 'search' so that on mobile the search button shows up on the on screen keyboard.
The input field is in the shadow dom of the vaadin-text-field element:
<vaadin-text-field class="search" type="search" autocapitalize="none" placeholder="Search packages" style="width: 70%;">
<vaadin-button class="search-field-button" theme="icon primary" slot="prefix" tabindex="0" role="button">
<vaadin-icon class="search-field-icon" icon="vaadin:search" slot="prefix">
</vaadin-icon>
</vaadin-button>
<input slot="input" type="text" id="vaadin-text-field-0" placeholder="Search packages">
<label slot="label" id="label-vaadin-text-field-0" for="vaadin-text-field-0">
</label>
<div slot="error-message" id="error-message-vaadin-text-field-0" hidden="">
</div>
</vaadin-text-field>
Ideally, I want to set this from the java side.
There is a method on the TextField getElement().getShadowRoot() but this comes up empty.
I'm guessing I need some way to access the slot for the input field.
How do I do this?
There is no Java API for this, but you can do it with JavaScript call from Java side.
textField.getElement().executeJs("this.inputElement.setAttribute('type','search');");
Related
There is a hidden text field in the Web View that pop up in the Native app.
Below is the hidden field design :
<span class="session-id" tabindex="-1"><input autocapitalize="none" autocomplete="off" autocorrect="off" data-testid="session-id" id="session-id" placeholder="session-id" spellcheck="false" tabindex="-1" type="text"></span>
There is another text field inside which is not hidden and also accessible :
<div data-testid="InputIdentityFlowValue-container" class="input-wrapper"><input class="input-InputIdentityFlowValue" type="email" autocomplete="email" autocorrect="off" spellcheck="false" tabindex="0" id="InputIdentityFlowValue" data-testid="InputIdentityFlowValue" placeholder="Email Address" aria-invalid="false" aria-label="Email Address" aria-required="true" required="" value=""></div>
When checked using Safari tool , we are able to identify it in the UI. Need to access this element to pass a value using XCUITest. Tried a lot of querying like XCUIApplication().otherElements, XCUIApplication().webViews.otherElements, descendants, etc etc. But unable to find this text field. Any pointers will be helpful.
Thanks in advance.
My Angular application doesn't show me keyboard, when i click on input for the first time. Second click and other shows it.
I don't have ngTouch and any function on inputs.
<div class="input-wrapper">
<input type="email" name="login" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="form.userData.login" placeholder="{{'LOGIN_OR_EMAIL' | translate}}" required>
</div>
Nothing special in html
if you have
-webkit-user-select:none;
user-select:none;
in your css remove them.
I use jquery mobile for build a Phonegap application. I create any radio sets like this :
I want to checked a radio in a switch case!
switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... }
Can you help me?
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too.
Assuming you have markup similar to this:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" />
<label for="radio-1">Arial</label>
<input type="radio" name="thefont" id="radio-2" value="verdana" />
<label for="radio-2">Verdana</label>
<input type="radio" name="thefont" id="radio-3" value="tahoma" />
<label for="radio-3">Tahoma</label>
</fieldset>
The script to switch to Tahoma would be:
$("[name='thefont']").prop( "checked", false ).checkboxradio( "refresh" );
$("#radio-3").prop( "checked", true ).checkboxradio( "refresh" );
The first line unchecks all boxes and the second checks the tahoma box. In jQM you must refresh the checkboxradio widget after changing values.
DEMO
Managing the iOS keyboard for HTML <input> forms (used in UIWebView) is well known, i.e. <input type="tel"></input> for telephone numbers.
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
But I was wondering about the keyboard's blue 'Go' button.
Sometimes the keyboard has a blue 'Go' button, sometimes the keyboard has a gray return button.
Is there any opportunity to control this behavior programmatically?
Update 2020/2021
As Cameron Cobb pointed out,
Safari Mobile supports the new HTML attribute enterkeyhint since version 13.7 ~ Sept. 2020 (https://caniuse.com/mdn-html_global_attributes_enterkeyhint).
The following values are possible (https://mixable.blog/ux-improvements-enterkeyhint-to-define-action-label-for-the-keyboard-of-mobile-devices/):
<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
Original Answer
Aha...
The 'Go' button is only shown, if the <input> tag is inside a <form> tag (and the form tag has an action attribute).
So, if you access your form elements afterwards with i.e. JavaScript, you can omit <form> tags.
'Go' button:
<form action="..." method="...">
<input type="text"></input>
</form>
'return' button:
<input type="text"></input>
The important part is that the form tag has an action property. (action="#" is a noop.)
<form>
<input type="text" />
</form>
<form action="#">
<input type="text" />
</form>
There is a better and more "straight forward" way of changing the enter button text. Use the attribute enterkeyhint in the input tag like in the example shown below.
<input enterkeyhint="go">
You can find more documentation on the Mozilla site here.
I'm attempting to re-style a vertical group of radio buttons, and the new theme I add to one of them shows up but the theme I remove from another/the rest doesn't go away.
My goal is to change theme of the selected radio button (the related controls, anyway) to make it stand out more when selected.
<div data-role="content">
...
<fieldset data-role="controlgroup" id="showChooser">
<legend><h3>Which show are you attending?</h3></legend>
<input type="radio" name="activeShow" id="activeShow1" value="1" />
<label for="activeShow1">
<h2>Choice 1</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow2" value="2" />
<label for="activeShow2">
<h2>Choice 2</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow3" value="3" />
<label for="activeShow3">
<h2>Choice 3</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
...
</fieldset>
...
</div>
This results in the following list being displayed:
(source: skitch.com)
So, on-click of one of them, I'm running this code:
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c');
$(this).next().attr('data-theme','e');
$("#settings").page();
});
The first line should, in theory, reset them all to the base-state of theme 'C', and then the second line would highlight the selected item. I can step through and see that these HTML changes are made, so it's obvious that what needs to happen next is for jQuery Mobile to re-parse and update the display.
Note the desperate attempt at refreshing the whole page with .page() at the end -- even that doesn't achieve the desired effect.
The first time you click one, it has the desired effect:
But subsequent clicks don't appear to un-highlight any previously selected rows:
I've also tried $("#showChooser").listview("refresh") and a few other similar things that I can't recall, but none have the desired effect. So what am I missing/doing wrong?
I had the exact same problem.
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
$(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});
See this jQuery forum post.