Make element selected/active (like when you using tab) - javascript

I am trying to make element lets say button active on page open. By active I mean when u pressing tab buttons elements, tabs and stuff us getting active one after one. But how can I achieve that element is selected defaulty on page start.

Try using:
element.focus();
Link to javascript documentation

All HTML elements have a Boolean attribute autofocus. It does not only work on form elements such as buttons, input fields, dropdowns, but also on focussable elements like <div contenteditable="true">.

Related

Using capybara to select a button without an id or value

I don't know how to click on a button that has no id or value.
I've already tried using the xpath and selector paths but neither worked for me.
<div class="button js-vehicle-section-next full-width mb1">Next Step: Select a Repair</div>
Is the code for the button on the site. My current attempts are.
find('js-vehicle-section-next').click
click_on('js-vehicle-section-next')
find_all(:xpath, "//*[normalize-space(text())='Next Step: Select a Repair'").first.click
The expected result is that the button will be clicked
click_on clicks link or button elements so it’s not going to work here because you are trying to click a div. Instead you can just use a valid CSS selector and call click on the returned element
find(‘.button.js-vehicle-section-next’).click
If you didn't have a specific class for the next "button" and you needed to do it by the contained text you could do
find('div.button', exact_text: 'Next Step: Select a Repair').click

is it possible to change an element on responsiveness?

just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again

Detect focus loss for input element, not onBlur

I'm implementing an autocomplete/combobox in dart. I'm using two elements for this, a <input type="text"> and a <ul> for the suggestions. I want to hide via css style display: none whenever the user leaves the input box. This works when using onBluron the input element.
If the user tries to click an item in the <ul>, the input looses focus and the <ul>is hidden before the click event on the <li> is run.
_listElement = new UListElement();
_textElement = new TextInputElement()
..onBlur((e) => setDisplayToNone(_listElement)); // hide element
I noticed that a jQueryUI implementation does not have this issue and I can not figure out how they detect when to hide the suggestion box. see https://jqueryui.com/autocomplete/
What alternate way can i use to hide the <ul> without hiding it on _textElement.onBlur?
If it helps, the two elements are always wrapped by a <div>. I'm looking for a dart-only solution, although vanilla-js answers that I can rebuild in dart are also appreciated.
Please look at events sequence:
input.focus
li.mousedown
input.blur
li.mouseup
li.click
So you might setup a flag variable, turn it up on li.mousedown, check it on input.blur and decide if you need to hide the list, and then turn it down on li.click

Make contents in div not editable (clickable)

I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?

Class changed by javascript not recognised in VB click event

On my page I have two tabbed sections of content. When the page is first loaded, the first tabbed area is displayed and the other one is hidden. I have some javascript in place which switches tabs and hides/displays the relevant content when one of the tabs are clicked. To mark which tab is the active tab, the active tab is given the class of "current".
When I submit a button on that page, I want it to do one of two things depending on which tabbed area is displayed. To find out which tab has been clicked, I check the class attribute of each tab:
Select Case True
Case tab1.Attributes("class").Contains("current")
....
Case tab2.Attributes("class").Contains("current")
....
End Select
However, checking the class attribute in this way shows that even though tab2 has been selected, tab1 always has the "current" class.
If however I create a hidden input like this:
<input type="hidden" id="SelectedTab" runat="server" class="SelectedTab" />
and then whilst changing tabs in my javascript, also set the name of the selected tab to display in the value of the hidden input, the correct tab name is recognised from the click event in my VB code.
Could someone please explain why this is?
Instead of using the hidden field, use the asp.net hidden field control and try again the same what you are doing.

Categories

Resources