Setting Focus To A Tabe Cell.
Sep 14, 2006
There is a tab control on a page with multiple tabs and handful of
controls in each tab. The way it's rendered in html (like grid etc..)
is in table format in tablerows and cells.
On clientside, on form validation in javascript, I would like to set
focus on to one of the tabs
and set the focus to the control on that tab.
I find this (tab) control by looking through all 'td' s and by it's id.
Now that I have "td" control, I would like to set the focus on to this.
Here is what I do. (FindHtmlControlByID method returns the control based on type and id)
firstTab = FindHtmlControlByID('TD','UltraWebTab1td0');
secondTab = FindHtmlControlByID('TD','UltraWebTab1td1');
secondTab.style.visibility = 'visible'
secondTab.focus();
textBox = FindHtmlControlByID('INPUT','uiTextBox1');
textBox.style.visibility = 'visible'
textBox.focus();
textBox.focus() fails with the message it's either not visible or not
enabled or it is a type of control that cannot be focused. If the tab
already had focus, then this works ok.
View 1 Replies
ADVERTISEMENT
Sep 15, 2011
I have a javascript program that uses a HTML table as an Excel-like grid. The user can use arrow keys to navigation the grid. When the user selects a cell and then hits <Enter> key, the program turns the cell from read-only to editable (an input box), and select all the text in the input box. When the user hits <Esc>, the program cancels the changes that the user has made and turns the cell back to read-only. So far so good. The problem is that as soon as the user hits <Esc> key and turns the cell back to read-only, I find that I cannot move the input focus back to the cell any more. Actually I cannot move the input focus back to _any_ cell in the table. When this happens, the user cannot use arrow keys to navigate the grid any more (like the grid has lost the input focus). The user needs to use the mouse to click at a cell in the table to get things working again.
The user can get around with this problem by un-selecting the text from the input-box before hitting <Esc>. But this is not something that I expect the user to remember to do. I need a way to fix this problem. I tried the logical thing and programmatically un-select the text before turning the cell back to read-only. But this actually made thing worse - this causes the workaround to stop working.
The only browsers that I have tested this program is IE6 and IE8. I have not tested this in any other browser.
Attached is a simplified version of the program that can show this problem in action. This simplified program first adds an empty table on the web page, and then creates an instance of the CEstGrid class that takes care of the grid. CEstGrid will add two rows of test data into the table with two columns in each row. The user should use a mouse to click at one of the cell, and the cell should be highlighted. The user uses arrow keys to navigate the table. When he reaches the end of the table, he will wrap around to the other side of the table. Let say the user reaches the cell in row-1 column-2, he hits <Enter> to change the cell to editable. He will find the text in that cell to be highlighted. When he hits <Esc> at this moment, he will find that he cannot use the arrow keys to navigate the table any more, and this is the problem. Please rename the test program from .TXT to .HTML to test it.
View 6 Replies
View Related
Jul 20, 2005
I am working on something that only needs to work in IE, and I've got
this code:
var aRows=oTable.rows;
var oCell1_1=aRows(0).insertCell();
oCell1_1.innerHTML= 'new cell'
Which inserts a row in my table and I can populate the cell with the
text using the innerHTML property. No problem.
My question is, how do I set the VALIGN of this new cell?
I have tried this..
oCell1_1.valign='top'
and that does not generate a JavaScript error but it doesn't
vertically align the text in the cell either.
Other attempts generate javascript errors.
View 2 Replies
View Related
Jun 19, 2007
given a cell from a table...
function Tbl_GetCell(tbl, row, col)
{
var theRow = tbl.getElementsByTagName("tr")[row];
return theRow.getElementsByTagName("td")[col];
}
I can set attributes like width, height, and align, but how can I set cell style info?
cell = GetCell(tbl,row,col)
these work fine... cell.align = "center"; cell.height = 22;
but this doesn't... cell.style = "font-weight: bold; text-decoration: blink"
View 2 Replies
View Related
Nov 14, 2007
I've created a table in HTML but I need to specify the cell width client side. I need to loop through the cells and set the size based on the rendered size of some other elements.
I'm using the following doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is causing me problems in Firefox. The width attribute is being set correctly but the actual table cells aren't being resized. Has anybody seen this before and does anybody have a workaround?
View 2 Replies
View Related
Jul 20, 2005
Currently in my html document I use the onload command inthe body section to
set the focus to a certain field. eg
Is there a way to set the focus to another field in a different frame other
than the one that the current document is in?
In my example, I have a frame called "top" that I would like the focus
setting to whenever a certain document is loaded in the frame "main".
View 2 Replies
View Related
May 5, 2006
Is there a programmatic means to set the focus to a component in a form when
the document loads?
View 3 Replies
View Related
Jul 11, 2006
I know this isn't related to generic javascript but I didn't found a
group dedicated to the FCKEditor. I'm sorry for the inconvenience.
I'm desperately trying to set the focus into a FCKEditor component
(client side). I know that the FCK object exposes a "Focus()" method
(the capital F isn't a spelling mistake). The problem is I don't know
how to bind to this object from my container page (aspx). How can you
reference this object?
View 1 Replies
View Related
Apr 24, 2011
I wrote code for a scramble word game and I am trying to set focus everytimge I click on check button..I've got it so it will set focus when I start game, but whenever I put put setFocus() on the onclick of the button it will not work.is there any way the I can have two procedures for onclick.like <input id="inbox" type="text" /><input type="button" value="check" onclick="guess()" "setFocus()"/>I also want to selectall if the word is incorrect not sure how to go about doing this..I did research on this problem, but they all give me examples on applying just one thing to the onclick not two..
View 3 Replies
View Related
Jul 20, 2005
I would like to know how to set the focus on a radio button (if it is
possible) I tried button[0].focus() but with no luck
The reason that I need to do this is to validate a form. If the user does
not select a radio button I would like my validation code to set the focus
at the first radio button within the pair that was not selected that way
he/she does not have to look for it.
View 3 Replies
View Related
May 10, 2009
I'm opening a dialog box using the jQuery UI dialog methods, this box will display a form, and I would like to autofocus the first element. I'm also modifying tabindex of the different form fields of this new form in order to make them a lot higher than those of the original page, and thus navigate through the form using only the tab key. The issue is that I can correctly change tabindex values, and correctly focus the first element but pressing tab will not focus the next element in my newly added form but seems to act as I was focusing the first "tabindexable" element of my original page. I also note that manually focusing (ie. clicking) the element cause no problem, new tab index order is respected. Does anyone have a clue where it can came from ? Something seems to be messed up in the tabindex order. Tested on FF3, maybe the browser only update tabindex order on "manual" focus and not when modifying attributes ?
View 2 Replies
View Related
Apr 19, 2011
I am working in a third party application which has a hookinto their window.onload() function.(it calls my fnCustomOnload. In my fnCustomOnload() function I have tried to bind a focusout event on a particular input and have it call a function callled fnGetRestriction(). The function fnGetRestriction()actually works without errors, I have forced it with the grabfocus.focus (lines 2 and 3)but it is called not being called anytime other than once at the beginning when it is force by lines 2 and 3.. The line that performs the alert() (line 4)works properly all the time. What is wrong with line 5?
View 1 Replies
View Related
Sep 29, 2006
There are many ways for setting focus on form fields. I'm actually looking for some code that automatically detects if there is any form on the page & then automatically sets the focus to the first field of the form.
No need of putting Form Name & Field Name in Javascript. Is there any way to do this ???
View 3 Replies
View Related
Jun 29, 2011
I want to set focus to a text field on a php page which is loaded by ajax.I used document.f.srch_txt.focus() .But it not working.
View 2 Replies
View Related
Nov 18, 2010
I've got this hidden div that pops up using jQuery when the login menu item is clicked.
<div class="entry-wrapper" id="reg-login" style="display:none;">
<div class="t"></div>
<div id="loginFormHolder" class="c">
<div class="close">
<a href="index.php" class="spotlight-close"> </a>
</div> <!-- close -->
<div class="login">
<div> <!-- blank --> .....
What I'm trying to do is setting the input focus on the user_session_username text input and the code is not working. The div pops up but the focus is never put into the user_session_username edit field.
View 5 Replies
View Related
Mar 5, 2006
I am trying to throw in some client-side validation to my php web form. My problem is that only one field is actually getting validated. Here is the code:
Form: onSubmit="return checkForm(this);"
script: function checkForm(form) {
var firstname = document.getElementById("wpFirstName").value;
var lastname = document.getElementById("wpLastName").value;
if (firstname == "") {
document.getElementById("firstNameError").style.display="inline";
document.getElementById("wpFirstName").select();
document.getElementById("wpFirstName").focus();
return false;
}else if (lastname == "") {
document.getElementById("lastNameError").style.display="inline";
document.getElementById("wpLastName").select();
document.getElementById("wpLastName").focus();
return false;
}
return true;
}
The if statement evaluating the last name field is the only statement that evaluates to true. It seems the first statment is bypassed. Any ideas? PS. the element with the id lastNameError/firstNameError is in a div tag.
View 4 Replies
View Related
Jan 27, 2009
I have this layout
And then I have this code to determine the cell height.
So basically I need both my first and last cells to be able to have the mainbody cells height, but that code only works when placed in or after the cell being measured, in this case "mainbody", my question is this, is their a way to get the size of the mainbody cell before its done loading somehow?
View 3 Replies
View Related
Apr 11, 2010
imagine table with 15 rows and 3 columns. If I move mouse over any cell I want some other specific cells to change their borders like with pseudo-class :
example
<style>
.boryellow {border: 3px solid yellow}
.borblue {border: 3px solid black}
</style>
this will work, a cell can change itself
<td name="third" class="boryellow" onmouseover="this.className='borblue'" onmouseout="this.className='boryellow'">cell</td>
even when dealing with empty images - click on link will change border of different element - imgs, but not span or td ...
<a href="#" onclick="document.all.xxx.className='borblue'; document.all['name'].className='borblue';
[code].....
Replacing any element link by "third" or "spanx" will cause stuck ant not executing other actions.
View 4 Replies
View Related
Mar 15, 2011
<script language="JavaScript">
function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}}
</script>
what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working.
View 4 Replies
View Related
Aug 18, 2010
I'm currently making a web application which needs to be fully compatible with iPad. The functions I've implemented so far work perfectly on Firefox, Internet Explorer and other browsers. However, the iPad itself responds a bit different. After a certain action, I want to put focus on a textfield with the help of Javascript. Again, this works perfectly with the normal browser, the iPad browser however seems to be blocking the focus. The reason I'm not posting any code is because it's basically irrelevant. All I do is:
[Code]...
View 1 Replies
View Related
Mar 6, 2011
I have a table with two rows and 4 columns, the first cell has rowspan of 2. How do I insert something into the first cell only? How can I get the cell index of the first cell?
View 4 Replies
View Related
Jul 23, 2005
Is there a reason why setting focus to a textbox input, also gives
focus to a submit button on the page, to where if you click enter in
the text box, the submit button will be clicked.
View 2 Replies
View Related
Mar 29, 2011
The default behaviour of focus() method is displaying the cursor at start of the char(In FF focusOffset is 0(zero) and anchorOffset is 0(zero)). I need to display the focus at end of char after calling focus() method.
View 5 Replies
View Related
May 9, 2010
I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus.A simplified version of my problem is:I've defined the function
function two_focus()
{
document.getElementById("two").blur();
[code]....
View 6 Replies
View Related
Apr 10, 2011
Is there a way to set the focus on a form field without using focus()? I use ajax to build the form and if I try to set the focus using focus() an error is generate because of the form hasn't been built by ajax. So, it would be nice if I could set the focus() as I built the form.
View 4 Replies
View Related
May 20, 2007
I'm attaching an onfocus event handler to an anchor tag like this:
if(window.attachEvent) anchor_node.attachEvent('onfocus', gotFocus);
if(window.addEventListener) anchor_node.addEventListener('focus',
gotFocus, false);
function gotFocus() {
alert('i got focus');
}
Is there any way to tell the difference between when this anchor is
focused by a user (perhaps by tabbing to it) as opposed to when I
programatically do it via anchor_node.focus()?
View 4 Replies
View Related
