jQuery UI Widgets › Forums › Navigation › Tabs › Arrow keys don't work in text input elements contained within Tab panels
Tagged: javascript tabs, jQuery Tabs, jqxTabs, Tabs, tabs plugin, Tabs Widget, tabs with editor
This topic contains 2 replies, has 2 voices, and was last updated by MikeA 13 years ago.
-
Author
-
January 31, 2012 at 4:57 pm Arrow keys don't work in text input elements contained within Tab panels #1960
Hi,
I want to implement a ‘rename’ tab label feature using jqxTabs. So the user can double click a tab and rename the text label for the tab. I did not see any built in capability to do this. So I tried trapping the ‘dblclick’ event for a tab which my method does get called fine. However, when I display a standard ‘input’ type element, the arrow keys (and home, end keys) do not work in the input field. This input field is a child of the tab panel element. ( I add it dynamically) Is there a way to get arrow keys working when an input is a child of a tab panel?
Also it would be best if there was a ‘rename tab label’ feature. What is the recommended way of implementing rename of tab labels?thanks,
Mike
February 1, 2012 at 7:05 am Arrow keys don't work in text input elements contained within Tab panels #1961Hi Mike,
Please follow the steps below to create an editor for the Tabs.
1. I created the tab using this html code:
<div id='jqxTabs'> <ul style='margin-left: 10px;'> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div> Content 1 </div> <div> Content 2 </div> <div> Content 3 </div> </div>
2. Then, I initialized the Tabs using this code:
$('#jqxTabs').jqxTabs({ height: 200, width: 500});
3. To edit the tab’s title on double click, I use the following script:
var me = this;// disable keyboard navigation. The keyboard navigation handles the arrow keys and selects the next or previous tab depending on the // pressed arrow key.$('#jqxTabs').jqxTabs({ keyboardNavigation: false });// find the tab we will show an editor for.var tab = $('#jqxTabs').find("li:first");// bind to the double-click event.tab.bind('dblclick', function (event) { // create a text input or get the already created. var input = me.input || $("<div style='position: absolute; z-index: 9999; background: white'><input/></div>"); var textinput = input.find('input'); if (!me.input) { // add the text input to the document's body. $(document.body).append(input); // update the tab's text on blur. textinput.bind('blur', function () { var newtext = textinput.val(); tab.text(newtext); input.css('display', 'none'); $('#jqxTabs').jqxTabs('_performHeaderLayout'); }); } me.input = input; // show the input. input.css('display', 'block'); // position the input over the tab and set its size. var taboffset = tab.offset(); me.input.css({ left: taboffset.left, top: taboffset.top }); me.input.height(tab.outerHeight()); me.input.width(tab.outerWidth()); var sizeoffset = 6; textinput.width(me.input.width() - sizeoffset); textinput.height(me.input.height() - sizeoffset); // set the initial text of the input. textinput.val(tab.text());});
The script above will position a text input over a Tab and will allow you to edit the tab’s title. The tab’s title is updated when the ‘blur’ event of the input is triggered.
Hope this helps you.
Best Regards,
Peter Stoevhttp://www.jqwidgets.com
jQWidgets TeamFebruary 1, 2012 at 4:53 pm Arrow keys don't work in text input elements contained within Tab panels #1970Peter,
Once I disabled the keyboard navigation the keys worked in the input field. After rename I then enable the key again. Works great.
Thanks for your help.Mike
-
AuthorPosts
You must be logged in to reply to this topic.