I need to focus paper input in a paper dialog box. I have tried all available solution but nothing is working.
this.$.homeSearch.$.input.focus();
this is my markaup
<paper-input id="homeSearch" class="home-search-btn" placeholder="Where do you want to go?" no-label-float value="{{searchText}}">
</paper-input>
I don't want autofocus when page load. I need to fire focus event from a method.
Instead of
this.$.homeSearch.$.input.focus();
, you can do
this.$.homeSearch.focus();
instead. paper-input inherits from HTMLElement by default so it already has a focus method built-in.
Related
I have 2 radio button, (input type radio),i used "checked" on the second, now, if i want to check the first radio button i need to click twice, how di i fix it ??
<label>YES</label> <input type={'radio'} name={'license'}/><br />
<label>NO</label> <input type={'radio'} name={'license'} checked={'checked'}/>
You are using uncontrolled inputs, so the React rendering cycle is interfering with the user modified state of the DOM.
If you continue using uncontrolled inputs, use defaultChecked and not checked. (See default values.)
Controlled components are recommended in most cases though.
We use a modified renderer for SelectOneRadio elements. This renderer does not set the disabled attribute on the underlying <input /> for disabled selectItems.
This is due to an accessibility requirement. Every element (also the disabled radio buttons) must highlightable and tabbable via keyboard.
Problem: when the items label is clicked, the form parameter is updated to the value of the disabled option. The disabled element is also checkable via keyboard.
Any idea how I can set the disabled attribute on the <input /> while keeping the elements tabbable?
Simply changing the renderer won't do I'm afraid. Much of the functionality related to keyboard navigation can be found in the widget code of the SelectOneRadio component:
https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectoneradio.js
You will probably need to override a lot of functions there.
Every element (also the disabled radio buttons) must highlightable and tabbable via keyboard.
This is by definition a contradicting requirement that can't be satisfied. A disabled element isn't focusable and it's perfectly normal. Both always go together.
So there is basicly no good solution, as the requirement is wrong.
However, here's a little fun fact:
The onclick event is triggered upon focusing the radio button, too. You may use event.preventDefault() and this will prevent the radio button from being selected.
The radio stays focusable when using arrow keys.
When the radio button is focused with arrow keys, then it doesn't become selected.
However, it iss no longer focusable using tab, and worse, tab navigation seem to be completely broken. It is even no longer possible to go from "One" two "Three" or back.
I would therefore not recommand it, but well, wrong requirement, wrong solution.
Chrome, Firefox and Internet Explorer under Windows 10 seem to all agree on that same behavior, tough !
<form action="">
<p><label for="a1">One</label>
<input type="radio" name="a" id="a1"/></p>
<p><label for="a2">Two</label>
<input type="radio" name="a" id="a2"/></p>
<p><label for="a3">Three</label>
<input type="radio" name="a" id="a3"/></p>
</form>
<script type="text/javascript">
function f(e) {
e.preventDefault();
}
var a2 = document.getElementById('a2');
a2.addEventListener('click', f, true);
</script>
When I open my website I want to automatically start typing in my form instead of the default browser search bar.
from the scren:
I want to start typing in the Google bar for example.
scrn
There is an autofocus attribute in Html 5
<input type="text" autofocus>
From MDN:
This Boolean attribute lets you specify that a form control should
have input focus when the page loads, unless the user overrides it
(e.g. by typing in a different control). Only one form element in a
document can have the autofocus attribute, which is a Boolean. It
cannot be applied if the type attribute is set to hidden (that is, you
cannot automatically set focus to a hidden control). Note that the
focusing of the control may occur before the firing of the
DOMContentLoaded event.
I am trying to create a register page using pure polymer. I used a paper-checkbox to let user check and agree the term of use. And my intention was only to display the submit button, (paper-button ) if the user has checked the user agreement. I am just wondering if there is a way that I can accomplish this using pure polymer instead of java script. I know paper-checkbox has a boolean property called "checked". I figure it would be nice that I could access this property inside my submit button and disable the button if checked is false.
Here is what I have, but it does not work
<paper-checkbox id="checkbox" checked$="{{ checked }}"> I agree user terms
</paper-checkbox>
<paper-button raised disabled$="{{ checked }}" onclick="submitForm()">Create
ID</paper-button>
Wrap your code in a dom-bind, and invert your disabled binding. Additionally, you want to bind to the element property rather than the attribute, so you can lose the dollar signs:
<template is="dom-bind">
<paper-checkbox id="checkbox" checked="{{checked}}"> I agree to user terms</paper-checkbox>
<paper-button raised disabled="[[!checked]]" on-click="submitForm">Create ID</paper-button>
</template>
I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things.
A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit. Another difference is that readonly elements can be focused (and getting focused when "tabbing" through a form) while disabled elements can't.
Read more about this in this great article or the definition by w3c. To quote the important part:
Key Differences
The Disabled attribute
Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to
form check boxes that are not checked.)
Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer
5.5 is particularly nasty about this.
Disabled form elements do not receive focus.
Disabled form elements are skipped in tabbing navigation.
The Read Only Attribute
Not all form elements have a readonly attribute. Most notable, the <SELECT> , <OPTION> , and <BUTTON> elements do not have readonly
attributes (although they both have disabled attributes)
Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
Form elements with the readonly attribute set will get passed to the form processor.
Read only form elements can receive the focus
Read only form elements are included in tabbed navigation.
No events get triggered when the element is having disabled attribute.
None of the below will get triggered.
$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact
While readonly will be triggered.
$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked
Disabled means that no data from that form element will be submitted when the form is submitted. Read-only means any data from within the element will be submitted, but it cannot be changed by the user.
For example:
<input type="text" name="yourname" value="Bob" readonly="readonly" />
This will submit the value "Bob" for the element "yourname".
<input type="text" name="yourname" value="Bob" disabled="disabled" />
This will submit nothing for the element "yourname".
Same as the other answers (disabled isn't sent to the server, readonly is) but some browsers prevent highlighting of a disabled form, while read-only can still be highlighted (and copied).
http://www.w3schools.com/tags/att_input_disabled.asp
http://www.w3schools.com/tags/att_input_readonly.asp
A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.
If the value of a disabled textbox needs to be retained when a form is cleared (reset), disabled = "disabled" has to be used, as read-only textbox will not retain the value
For Example:
HTML
Textbox
<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />
Reset button
<button type="reset" id="clearButton">Clear</button>
In the above example, when Clear button is pressed, disabled text value will be retained in the form. Value will not be retained in the case of input type = "text" readonly="readonly"
The readonly attribute can be set to keep a user from changing the value until some other conditions have been met while the disabled attribute can be set to keep a user from using the element
The difference between disabled and readonly is that read-only controls can still function and are still focusable, anddisabled controls can not receive focus and are not submitted with the form