Textbox enter, invokes linkbutton in firefox, not in IE

Question

hello everbody, i have a textbox on my form with a linkbutton next to it. the textbox' id is textbox1 and the linkbutton is lbSearch

in the page_load event i add:

  this.TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode)
        {
            if ((event.which == 13) || (event.keyCode == 13))                              
            {
                document.getElementById('" + this.lbSearch.ClientID + "').click();
                return false;
            }
        }
        else 
        {
            return true
        }; ");

and in firefox this works but in internet explorer it doesn't

this is because the linkbutton get's rendered as

     <a href="..."

how can i resolve this?

without changing the linkbutton to an imagebutton or regular button.

the linkbutton gets rendered like this:

    <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$zoeken1$lbSearch", "", true, "search", "", false, true))' id="ctl00_zoeken1_lbSearch">zoek</a>

edit: i tried the following and received the following message:

function onkeydown does not always return a value
rule: 1, column: 243

source:


if(event.which || event.keyCode)
{
if ((event.which == 13) || (event.keyCode == 13)) 
{ 
 var link = document.getElementById('ctl00_zoeken1_lbSearch'); 
 __doPostBack(link.id.replace('_','$'),''); 
 return false;
}
else
{
 return true;
}
} 
else
{
return true;
};

Answer 1

click event doesn't get fired on Anchor tags in IE. This is because the rendered html tag doesn't contain onclick method

<a href="javascript:__doPostBack('somename','')">text here</a>

Here are the work-arounds:

var link = document.getElementById('');

__doPostBack(link.id.replace('_','$'),'');

or

eval('(' + link.href + ')');

EDIT:

I have tested the following in IE,FF,chrome and safari:

<a href="javascript:alert('test');" id="ctl00_zoeken1_lbSearch">zoek</a>
<input type="text" onkeydown="KD(event)" />
<script>
    function KD(e){
        e = e || window.event
        var k = e.keyCode || e.which;
        if(k==13){
            var a = document.getElementById('ctl00_zoeken1_lbSearch');
            //eval(a.href.replace(/javascript:/g,'')); //if this doesn't work use doPostBack
            __doPostBack(a.id.replace('_','$'),''); 
        }
        return false;
    }    
</script>

I hope this works for you now!

Answer 2

You would be better off detecting the enter key using the keypress rather than keydown event, and it would be better to use a function rather than a long piece of code in an attribute. Also if you want to prevent the default action you'll need to return false in the onkeypress attribute, as below.

<script type="text/javascript">

function checkEnterPressed(evt, linkButtonId) {
    var charCode = evt.keyCode || evt.which;
    if (charCode == 13) {
        // Do the LinkButton stuff here...
        return false;
    }
    return true;
}

</script>


this.TextBox1.Attributes.Add("onkeydown",
    "return checkEnterPressed(event, '" + this.lbSearch.ClientID + "')");

Doing the search and replace on the ID to get the value to pass to __doPostBack seems hopelessly brittle and hacky. I really think you should find another way. Can you get hold of that value ctl00$zoeken1$lbSearch from the this.lbSearch LinkButton object somehow?