Setting value via Javascript sets focus to textbox in IE10

Question

I have the following Textbox

<asp:TextBox runat="server" ID="txtSeleID" Columns="12" MaxLength="14" 
             onfocus="javascript:SetSearchText();" 
             onchange="javascript:SetSearchText();"></asp:TextBox>
<asp:RegularExpressionValidator id="REV_SeleID" runat="server" 
             ErrorMessage="ID must contain up to 12 numbers." 
             Display="Dynamic" ControlToValidate="txtSeleID" 
             ValidationExpression="ID...|^\s*(\d{1,12}|\d{4}-\d{4}|\d{3}-\d{4}|\d{2}-\d{4}|\d{1}-\d{4}|\d{1}-\d{4}-\d{4}|\d{2}-\d{4}-\d{4}|\d{3}-\d{4}-\d{4}|\d{4}-\d{4}-\d{4})\s*$" CssClass="ValidationError" SetFocusOnError="True">(!)
</asp:RegularExpressionValidator>

and the below javascript :

function SetSearchText() {
var Tbox = document.getElementById("<%=txtSeleID.ClientID%>");
if (Tbox.value == "ID...") {
    Tbox.value = "";
    Tbox.className = "";
}
}
$(document).ready(function () {
var Tbox = document.getElementById("<%=txtSeleID.ClientID%>");
if (Tbox.value.length == 0) {
    Tbox.className = "quickEnter";
    Tbox.value = "ID...";
}
if (Tbox.value == "ID...") 
    Tbox.className = "quickEnter";
});

Here is the button:

<asp:ImageButton EnableViewState="false" id="SubmitBtn" runat="server" 
    ImageUrl='<%#Page.ResolveUrl("~/images/btn_submit.gif")%>' 
    onclick="Submit_Click" ToolTip="Submit" />

The issue is that when I click on my submit button, it calls the SetSearchText() function and sets the value to "" . In IE 10, it sets the focus to this textbox and I have to hit my submit button again to get it to submit.

If I comment out the setting of the value, the focus issue doesn't occur.

How can I prevent the browser from forcing a focus to my textbox when attempting to submit?

EDIT: Added the regular expression validator to the code section.

EDIT: I found this issue that was having a similar issue, but I don't see a resolution. In this one, he is using html tags. I'm using ASP tags so I can't as easily change the input type.

Answer 1

I ended up doing a workaround by checking for the browser version. If IE 10/11, I don't add the text to the input field.

$(document).ready(function () {
    var lexidTbox = document.getElementById("<%=txtSeleID.ClientID%>");
    //workaround for IE10/11 issue
    var showLegalText = true;

// IF THE BROWSER IS IE10
if (navigator.appVersion.indexOf("MSIE 10") !== -1) {
    showLegalText = false;
}

// IF THE BROWSER IS IE11
if (navigator.userAgent.indexOf("Trident") !== -1 && navigator.userAgent.indexOf("rv:11") !== -1)
{
    showLegalText = false;
}

if (showLegalText) {
    if (lexidTbox.value.length == 0) {
        lexidTbox.className = "quickEnter";
        lexidTbox.value = "ID...";
    }
    if (lexidTbox.value == "ID...")
        lexidTbox.className = "quickEnter";
}

});

To be sure, I do not care for this workaround because it's dependent on checking IE versions, but this is the only way I could find to solve this issue. This prevents the line Tbox.value = ""; from being run, which avoids the issue I'm having.