We are working on an electron web app.
In our pages we are using input, textarea and select tags, which have - among others - the tabindex attribute to make correct tab navigation possible.
The indeces are always starting with 1.
In input and textarea tags the tab navigation works but not with select tags.
Unfortunately the dropdownlist of a select in electron opens when you click on the element - not just when you click the arrow-button on the right edge of the element - and then the cursor seems to be captured.
Pushing the tab-key has no effect anymore.
Is there a trick to make tab navigation possible even with select tags?
Any help would be appreciated.
Related
I am currently working on a kiosk-ish project on Windows platform, where the user should fill in their contact info. I’ve used the input element with the custom on-screen keyboard, so I don’t need OS-level stuff, but the only problem left is native Chrome UI for interaction with inputs like “tear” cursor and context menu for text-editing actions (copy, paste, etc). I have two questions:
can I customize the color of this “tear” cursor?
can I hide this context menu?
I’ve already made event.preventDefault() with “contextmenu” event аnd used these flags with Chrome shortcut:
--chrome --fullscreen --disable-pinch --overscroll-history-navigation=0 --no-context-menu --kiosk …
Thanks in advance!
You can make the text un selectable so that the user can not click on it for a word selection and so the tear cursor will also not appear with the context menu
Till it is editable the tear cursor ui and functionality is from the native side of the phone which can't be changed.
For hiding the context menu make the input text selection to disable which may be an option but we can't disable selection in an input. Try with custom input
I'm using TagCommander and I'm trying to fire a specific tag when a user click or scroll within a certain page.
I can easily detect clicks and scroll and fire an event/set a variable according to that, but I can't find a way to fire a Tag when that happens.
My tag should actually fire according to a specific perimeter (a subset of pages) and when a user does some specific action on the page (i.e. click or scroll).
Is there any way to do that?
it's been a while, maybe you found a solution.
To let a click fire, you should go to:
Triggers > edit > choose "Clicks" from the horizontal menu. Under "selector path" insert the CSS selector path of the Button/Link/Call to Action that you want to track. Click on "done".
If you don't know how to select the CSS selector,
go to your website,
open the chrome console,
activate the tab "Elements",
activate the array,
select with the mouse the Button you want to track
in the Tab "Elements" the Elements will be highlighted in its code
if you go on the line all to the left it will appear 3 points (...), click on them and select "copy selection" > CSS Path
it should be something with #, for example #tab1234
I have developed hybrid application with Cordova (PhoneGap/ HTML / jQuery/ CSS) on iOS platoform and I am facing application crash issue on one scenario.
In the page I have mentioned three select elements in a sequence along with few inputs. When I focus on first input element of form and used "NEXT" button of virtual keyboard to move next element it work fine till it come to first select option. Once first select option get focus by "NEXT" button event it open up its option window. if I do not wait on first select option and press "NEXT" button then my application get crashed. I have tried multiple option to fixed this issue like below:
1) keeping all options disable till user click on its parent div. but event does not work on disable select option. However it work on other area like its associated label.
2) keeping hidden input next to select option with tabindex=1
I searched lot but didn't find any proper solution. Searched to disable NEXT button focus event on select option to remove default behavior of select option on iOS.
Does anyone have idea to fix this issue? Do we have any safari/iOS base attribute to disable default behavior OR any jquery/ javascript solution?
Best Regards,
Jeet
Hello my name is Shane,
I am coding a custom website. I have built a contact form and am using SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/) for my drop-down feature. I have several Input Fields, two buttons and one Select Box (drop-down). I have the form working perfectly, my issue is with the TabIndex. I have the correct tabindexs coded in each Input, but when I tab to the Select Box it gets ignored.
Here is the page: http://www.lightupco.com/contact.htm
NOTE: you have to click the Envelope/Pen icon to reveal the form.
The only clue I have from researching a forum with similar issue, is it has something to do with the underlying UL throws the tab index off.
I'm not sure what code from my page to include here, to get help figuring this out?
Hey Shane I wrote SelectBoxIt. The reason your select box tabindex is getting ignored is because SelectBoxIt hides the original select box and replaces it with new HTML that is easier to style (a div element). Hence, the tabindex attribute is not being set on the visible drop down (the div element), only the hidden select box.
If you don't mind creating an issue on Github, I would be happy to add a feature to SelectBoxIt that copies any tabindex attribute on the original select box to the new visible drop down. That should solve your issues.
The selectbox has index 0. If you click in the Name: input, your index is 1, so, your indexes as wrong.
Why using tabindex, after all? -.-
i have this script that is meant to autosuggest values based on the input and then when a user selects a value from the drop down, it should turn itself into the tag, the problem is when i select a value, it only tags the first 2 or 3 characters, you can check out the working script at js fiddle
http://jsfiddle.net/DTaMU/5/
first try typing GOOGLE then click add tag which works fine!
then try typing 'a' and selecting any value from the drop down box i.e Actionscript and see the tag, it only tags the first letter. thanks
I am not sure about your tag editor plugin and how you integrate with jquery ui dropdown, but it simply add the tag when the textbox lose focus cause 'a' being inserted. Note the dropdown designed to focus on the item cause the textbox lose focus. Please put the button and the added tags on the top so it not hidden when dropdown visible to see when it was added.