As the title states: Will focus still be set on form controls with autofocus="autofocus" even if they are hidden with display: none; or visibility: hidden;?
If your question is whether a hidden field can steal autofocus from a visible one, the answer is no.
Hidden fields with an autofocus property get focus when they are made visible.
Here's a jsFiddle that shows what happens if you have a visible field and a hidden field, then show the hidden field.
And here's a variation that demonstrates what happens if the visible field does not have an autofocus property.
The HTML5 draft standard only requires that an element be "focusable" where focusable means:
An element is focusable if the user agent's default behavior allows it
to be focusable or if the element is specially focusable, but only if
the element is either being rendered or is a descendant of a canvas
element that represents embedded content.
User agents should make the following elements focusable, unless platform conventions dictate otherwise:
a elements that have an href attribute
link elements that have an href attribute
button elements that are not disabled
input elements whose type attribute are not in the Hidden state and that are not disabled
select elements that are not disabled
textarea elements that are not disabled
command elements that do not have a disabled attribute
Elements with a draggable attribute set, if that would enable the user agent to allow the user to begin a drag operations for those
elements without the use of a pointing device
Editing hosts
Browsing context containers
It does say "but only if the element is either being rendered..." and the standard defines "rendered" as:
An element is being rendered if it is in a Document, either its parent
node is itself being rendered or it is the Document node, and it is
not explicitly excluded from the rendering using either:
the CSS 'display' property's 'none' value, or
the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or
some equivalent in other styling languages.
Just being off-screen does not mean the element is not being rendered. The presence of the hidden attribute normally means the
element is not being rendered, though this might be overridden by the
style sheets.
User agents that do not honor author-level CSS style sheets are nonetheless expected to act as if they applied the CSS rules given in
these sections in a manner consistent with this specification and the
relevant CSS and Unicode specifications.
In short, the answer appears to be that if all other requirements are met then display:none won't be focused but display:hidden will - Assuming all browsers actually follow the spec.
Related
I'm writing a custom input element called fancy-input, which can participate in a form via the FormInternals API. In particular, the ElementInternals.labels property gives me a list of the label elements associated, via their for attributes, to an instance of fancy-input.
But now let's say I also want to write a custom label element called fancy-label. It renders a native label element in its shadow DOM with fancy styles, formatting, etc. How do make it known that an instance of fancy-label is the "label" associated with an instance of fancy-input. In particular, I'd like my fancy-label node appear in the NodeList returned by calling ElementInternals.labels on the associated fancy-input element.
One possible approach would be for fancy-label to render a native label into a slot, keeping it in the light DOM and, hence, visible to the form and the fancy-input element. But is there a solution with the native label in the shadow DOM of fancy-label?
I have a Typo3 server. On that I created some different content elements with mask.
In this elements there are often repeating content, like texts or other stuff.
So the editors make a new element in the backend, there they can add a headline and as much text parts as they want.
Often it looks like this:
Thats good, the editor can see a "preview" of the textparts. In this example "Karriere,Partner...". This naming happens automatically.
My Problem is, some times there arent any titles. Its always "No title". As an editor its quite hard to find the right dropdown to edit some stuff, you mostly have to open all dropdowns and search for the right one.
Its look then like this:
In both elements there are some string inputs that are very good for the title.
So my question is, how is mask gonna choose the title? Its not the first string input.
And secondly, can I tell Mask that they have to choose input field XYZ as title?
Heyo
Yes, you can tell Mask which field to use as a title for inline elements (like repeating contents). When you're setting up a new Mask element, right below the "Label" field of the repeated inline element, there is a field "Field that should be used as label for inline element (starting with tx_mask_)". This will be used as the title that is displayed in the backend. In the placeholder of that field, it explicitly says that "If empty, first field is used".
So, if your inline element has a field "my_awesome_header" which you would like to use as the title in the backend, set the above to "tx_mask_my_awesome_header".
I am not certain as to why it does not display anything in your second example. It might be that either the first input field is not a string, or the first input field is a string but it is empty.
I hope this helps. Let me know if you need further clarification.
Edit: Since that question came up, it should be possible to set a static default title to the containing Mask element using mod.wizards.newContentElement.wizardItems.mask.elements.[name of the mask element].tt_content_defValues.header = My awesome static title. As I said in the comments, though: I always give my Mask elements a header field and let editors fill that in.
I'm looking for a good way to reveal a hidden element (a div) based on specific input into a form field. The application is an order form that isn't using any database. I want to have users input a coupon code and if it matches have the div appear (which contains what is needed to do the discount). And if it doesn't match it either does nothing, loads another hidden element or reveals a message like "invalid code".
PHP would be preferred but I'm open to anything. I don't see how the textbox where users enter the code has to be submitted with a submit button as it would submit the order form. It isn't critical that the discount is 100% secret. In other words, if they think to view the source code to see if they can figure out if there's a discount then they've earned it.
I've thought about using a inline frame for simplicity but I don't think that will work.
You could use the input's oninput function to watch the value entered. On each keypress you could make a call to see if it matches a coupon code. If the coupon codes are always "x" length, you could only do the call when the value reaches that length (if you don't want to call on every single keypress).
Alternatively, you could use a button and use it's onclick attribute. It would be the same idea as above, just instead of making the call on every keypress, you would only make the call on the button's click.
Once the value matches, just set the hidden div from "display: none" to "display: block" or something like that.
oninput reference
onclick reference
Have a look at the following code:
elem = driver.find_element_by_id(":8")
elem.click()
time.sleep(1)
elem = driver.find_element_by_id("country_residence")
print "elem visible ? = " + str(elem.value_of_css_property('visibility'))
Select(elem).select_by_value("DE")
The print states that the element is visible a this moment:
elem visible ? = visible
However, I get the following error message:
selenium.common.exceptions.ElementNotVisibleException: Message: u'Element is not currently visible and so may not be interacted with' ; Stacktrace:
at fxdriver.preconditions.visible (file:///var/folders/0s/j6874rlj63qccjx38ltmwy880000gn/T/tmppJ09Vu/extensions/fxdriver#googlecode.com/components/command_processor.js:8791:5)
at DelayedCommand.prototype.checkPreconditions_ (file:///var/folders/0s/j6874rlj63qccjx38ltmwy880000gn/T/tmppJ09Vu/extensions/fxdriver#googlecode.com/components/command_processor.js:11438:1)
at DelayedCommand.prototype.executeInternal_/h (file:///var/folders/0s/j6874rlj63qccjx38ltmwy880000gn/T/tmppJ09Vu/extensions/fxdriver#googlecode.com/components/command_processor.js:11455:11)
at DelayedCommand.prototype.executeInternal_ (file:///var/folders/0s/j6874rlj63qccjx38ltmwy880000gn/T/tmppJ09Vu/extensions/fxdriver#googlecode.com/components/command_processor.js:11460:7)
at DelayedCommand.prototype.execute/< (file:///var/folders/0s/j6874rlj63qccjx38ltmwy880000gn/T/tmppJ09Vu/extensions/fxdriver#googlecode.com/components/command_processor.js:11402:5)
How is that possible?
The Selenium way to check whether an element is visible is to use the is_displayed() method. Given what you've described, if you do:
elem = driver.find_element_by_id("country_residence")
print elem.is_displayed()
you should get False as a result. There are multiple reasons an element may be invisible. The visibility CSS property is one of them. There's also the display property. And then consider that the visibility of the element's parents and grandparents can affect whether it is visible. It could be off-screen, etc.
Checking the element's visibility CSS property in isolation is definitely not the way to check whether it can be interacted with.
Selenium understands that element is visible/invisible not just by 'visibility' property. As it's written for selenium's "is_visible" method:
"Determines if the specified element is visible. An
element can be rendered invisible by setting the CSS "visibility"
property to "hidden", or the "display" property to "none", either for the
element itself or one if its ancestors. This method will fail if
the element is not present."
So, answering your question "How is that possible?" - it (element or it's ancestors) can have no property 'visibility', but can have 'display:none' property
I have a form and a series of panels containing inputs inside it, as a list. When I click the add button, the form is submitted and a new item is added into this form. Input inside a newly created panel gets date-picking behavior. The problem is that it cancels behavior applied to inputs which already were on that form (added previously). Inputs in other forms are not affected.
Each field behavior is applied onto has unique name. Values inside inputs are processed correctly.
How to preserve behavior applied on old inputs?
How to preserve behavior applied on old inputs?
You probably put your input fields into a ListView, right? If so, try calling ListView.setReuseItems(true). This setting makes sure that when you add something to the listview and it is rendered again that the old items (with the old input fields and their behaviors) will be kept instead of creating new ones.