How do I add autofocus to my spring form input? - javascript

<div>
<sf:input type="text" cssClass="xxsLen" id="field1" maxlength="3" path="Data.field1"/>
</div>
I have more but I want to add autofocus to the first one. How do I do it here? I tried adding auto focus at the end but it breaks my code. Also this is a .jsp file.

If your Spring version is remotely modern, you can add your own attributes. You need proper XHTML though, so try this:
<sf:input type="text" cssClass="xxsLen"
id="field1" maxlength="3" path="Data.field1" autofocus="autofocus" />

Related

Javascript, I am not being able to cursor to input box

I can't set focus on html input, I tried this code, And it doesn't work.
document.getElementById('ember19').focus();
document.getElementById('ember19').click();
document.getElementById('ember19').select();
document.getElementById('ember19').value='Badman55555#hotmail.com';
document.getElementById('ember19').setAttribute('value','Badman55555#hotmail.com');
document.getElementById('ember22').focus();
document.getElementById('ember22').click();
document.getElementById('ember22').select();
document.getElementById('ember22').value='Bad123456';
document.getElementById('ember22').setAttribute('value','Bad123456');
Please before answer try your code on this page
https://id.sonyentertainmentnetwork.com/signin/
Try using autofocus
<input type="text" name="myInput" autofocus />
https://www.w3schools.com/tags/att_autofocus.asp

Selenium with Python -- finding element without proper identifiers

I am using selenium with python to write the code. I am looking to pull the information from a text box. The box auto fills as other information is being filled out. Inspecting the box gives the following code:
<input type="tel" autocomplete="off" name="amount" step="any" class="form-
control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"
placeholder="" tw-focusable="" show-decimals="$ctrl.showDecimals" tw-number-
input-formatter="" ng-change="$ctrl.changedAmount()" ng-
model="$ctrl.ngModel" ng-disabled="$ctrl.ngDisabled" disabled="disabled"
style="">
The issue is that there is already another input box that has the name "amount", so I can't do a simple selection by name. I am thinking this would require me to use a CSS selector but everything I have tried so far has not worked. Please let me know what I can try.
Looks like you need to use CSS or XPath locators.
Its hard to tell how exactly you can find that element since you haven't provided a source of the entire page but here are some tips.
In the worst case when you cant find any combination of attributes that will uniquely identify the element you need to rely on dom nodes hierarchy, i.e. in order to find first input on the following page:
<!DOCTYPE html>
<html>
<head>
<title>Dummy page</title>
</head>
<body>
<div>
<div>
<input type="text">
</div>
<p>
<input type="text">
</p>
<input type="text">
</div>
</body>
</html>
You can use XPath locator that might look similar to this one:
//div/div/input
But that's the worst case, usually you can use more flexible locators based on element attributes that less likely to be affected by page structure modifications. Let's say each of our inputs from the page above has "name" and "disabled" attributes.
<div>
<div>
<input name="input1" disabled="" type="text">
</div>
<p>
<input name="input1" disabled="disabled" type="text">
</p>
<input name="input2" disabled="" type="text">
</div>
Then we can find first input using the following locator:
//input[#name="input1" and #disabled=""]
Hope that helps.

Angular2 RC5 input pattern binding not working

I'm having trouble with regular expressions in Angular2 RC5. If I hard code the regex (like below), everything works perfectly.
<input type="text"
name="date"
class="form-control"
[(ngModel)]="date"
placeholder="e.g. 24/05/2016"
(change)="updateAvailability()"
pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
title="Date Format (DD/MM/YYYY)"
required />
However, the pattern is being build dynamically as part of the component, so when I try to bind to the pattern attribute (as below), the validation no longer works.
<input type="text"
name="date"
class="form-control"
[(ngModel)]="date"
placeholder="e.g. 24/05/2016"
(change)="updateAvailability()"
[pattern]="datePattern"
title="Date Format (DD/MM/YYYY)"
required />
I've tried using interpolation e.g.
pattern="{{ datePattern }}"
but that produces the exact same results.
When I look at the DOM using Developer Tools in the browser, everything appears to be correct, but Angular seems to be adding an ng-reflect-pattern (see below) attribute with the exact same value. I can't find any documentation on this anywhere, and not sure if this is related to the problem or not.
<input name="date"
title="Date Format (DD/MM/YYYY)"
class="form-control ng-untouched ng-pristine ng-invalid"
required=""
type="text"
placeholder="e.g. 24/05/2016"
pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
_ngcontent-abf-3=""
ng-reflect-name="date"
ng-reflect-pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
ng-reflect-model=""></input>
I can't understand why the pattern attribute can be identical in the DOM, but hard coding the pattern works, and binding to the component doesn't.
Any ideas would be greatly appreciated?
Cheers.

Submit a form with jQuery / Javascript without ignoring "required" tag

so I have the following form:
<form action="register.php" method="post" id="register-form" name="register-form">
<input type="text" id="username" name="username" placeholder="Username" autofocus="autofocus" required />
<input type="text" id="password" name="password" placeholder="Password" required />
Register
<input type="submit" style="display: none;" />
</form>
What I want to know, is there a way to make jQuery take care of the "required" tag when submitting a form? Right now it doesn't.
Trigger click on the submit button instead.
http://jsfiddle.net/PdUcq/
From this link,
required attribute works in most new browsers. In older browsers its not supported since its part of the HTML5 spec.
If you are looking for cross browser support with jquery you would have to use some plugin. One of the good ones is this plugin.
Or you can go ahead and write your own custom validators, but why re-invent the wheel.

Text box with default text

I have a text box with a default text. I am using javascript to dissapear it when the user clicks in this, but i want to make it work without javascript. Is there any way to do that in html or php? Thank you!
It can be done in flat HTML5 using the placeholder attribute of the <input> tag
<input type="text" placeholder="Default Text" />
In HTML5, there has been the introduction of new attribute called placeholder
You can use it like this
<input type="text" placeholder="text to show and hide" />
it is simple you can use html5 control also.there
like.
<input type="text" name="txtFirstName" id="txtFirstName"
placeholder="enter first name" />

Categories