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.
Related
Using bootstrap 5, specifically going over this: https://getbootstrap.com/docs/5.3/forms/form-control/
I am trying to create a simple example text area with some text in it pre-populated, so that I can add a button that will copy the propulated text into clipboard.
Method 1-
Sample code from Bootstrap looks like this:
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
If I use something like 'placeholder' the text box gets prepopulated but I can't "grab" that text neither manually or via a js script. The placeholder my understaning is just a hint of what is to be filled out in the box.
Method 2-
If I used for example a regular HTML textarea element I can do this, no problem, with something like this:
<textarea id="textbox" rows="3" cols="80">{{prepopulated_date_variable}}</textarea><br />
<button type="button" class="btn btn-primary"onclick="copyTextBoxData()">Copy Copy Data</button>
So if I use a regular "textbox" like in Method 2, it does not leverage the cool look and resizing capabilities of bootstrap, hence why I am trying to get Method 1- or similar to work.
Any queues? tips? maybe another element?
I am new to this all, but the concept is that I am passing from a another piece of code the prepopulated data for user to see (leveraging Jinja template with Python if that makes any difference) and then idea is that button allows my user to copy to mem clipboard what is in the text box, so that they can past in something else.
Appreciate any support or ideas.
I am using Method 2- described in problem statement. What I am expecting is that I can use Method 1 or alternative with bootstrap component to leverabe the styling and features of bootstrap.
You can use JavaScript to set the value of the form inputs when the page loads.
This code creates a form with two inputs (email and password) and a button that, when clicked, copies the values of the inputs to the clipboard. The copyToClipboard function uses the document.getElementById method to get the values of the inputs, concatenates them into a string, creates a temporary input element, sets its value to the string, selects it, and then executes the document.execCommand("copy") command to copy the value to the clipboard. Finally, it removes the temporary input element and alerts the user that the data has been copied.
function copyToClipboard() {
var email = document.getElementById("exampleInputEmail1").value;
var password = document.getElementById("exampleInputPassword1").value;
var data = "Email: " + email + "\nPassword: " + password;
var tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = data;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("Copied to clipboard: " + data);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<form>
<div class="form-group">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" value="example#email.com">
</div>
<div class="form-group">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" value="password123">
</div>
<button type="button" class="btn btn-primary" onclick="copyToClipboard()">Copy to Clipboard</button>
</form>
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');");
In all input fields in Chrome appear nonsens texts - some texts, that were written in other text field. It seems, that it is connected with default IDs. It can be probably resolved for text fields with setting custom id with setId(..) method. But it doesn't work for datefields, comboboxes etc. while the id is set for the parent div not the input itself eg.:
<div role="combobox" class="v-filterselect v-widget small v-filterselect-small v-has-width" id="Field-1553856663994" style="width: 100%;" autocomplete="off">
<input type="text" class="v-filterselect-input" autocomplete="nope" id="gwt-uid-134" aria-labelledby="gwt-uid-133" style="width: 100%;" tabindex="0" dir="">
<div class="v-filterselect-button" aria-hidden="true" role="button"></div></div>
Is the way in Vaadin to set id for inner element or to disable completion in Chrome?
Chrome the behavior on autocomplete attribute changed a while ago, but it has been until recently we made a change in our implementation according to that in Vaadin 8.
There is lengthy discssion about this in our issue tracker;:: https://github.com/vaadin/framework/issues/11437
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.
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.