Highlight text in Textbox using javascript RSS

• • Reply
  

  ggsriram

  Member

  37 Points

  63 Posts

  Highlight text in Textbox using javascript

  Sep 23, 2008 09:03 AM|LINK

  Dear Friends

  Im doing a Validation for a text box if the textbox has some wrong inputs  ineed to throw an error and

  I need to Highlight text in Textbox using javascript. Can anyone help me with the CODE. please
  

  Sriram Govindarajan
  Software Engineer
  • Moved by XIII on Sep 23, 2008 09:25 AM
• • Reply
  

  mooncoder

  Participant

  955 Points

  178 Posts

  Re: Highlight text in Textbox using javascript

  Sep 23, 2008 09:34 AM|LINK

   

   try this,
  
  
  document.getElementById('test').focus();
  document.getElementById('test').select();

   

   

   

  Sincerely,
  ABHI
  
  Please remember to click Mark as Answer on the post that helps you, and to click Unmark as Answer if a marked post does not actually answer your question.
  • Marked as answer by Lance Zhang - MSFT on Sep 29, 2008 01:37 AM
• • Reply
  

  kipo

  All-Star

  16475 Points

  2811 Posts

  Re: Highlight text in Textbox using javascript

  Sep 23, 2008 09:39 AM|LINK

  If you're using AJAX, try with ValidatorCallout: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx

• • Reply
  

  yasserzaid

  Star

  13991 Points

  2597 Posts

  Re: Highlight text in Textbox using javascript

  Sep 26, 2008 06:27 PM|LINK

  Hi

  try these examples

  1)

  <input name="txtFirstName" type="text"
   id="txtFirstName"
   onfocus= "this.style.backgroundColor='Yellow'; this.style.color = 'Blue';"
   onblur="this.style.backgroundColor='Window'; this.style.color='WindowText';"/>

  2)

  void SetInputControlColors(WebControl ctl,
     Color backColor, Color foreColor,
     Color focusBackColor,  Color focusForeColor)
  {
     string jsOnFocus = string.Format(
        "this.style.backgroundColor = '{0}';" +
        "this.style.color = '{1}';",
        focusBackColor.Name, focusForeColor.Name);
     string jsOnBlur = string.Format(
        "this.style.backgroundColor = '{0}';" +
        "this.style.color = '{1}';",
        backColor.Name, foreColor.Name);
     ctl.Attributes.Add("onfocus", jsOnFocus);
     ctl.Attributes.Add("onblur", jsOnBlur);
  }

  Using the SetInputControlColors method is trivial:

  
  SetInputControlColors(txtFirstName,
     SystemColors.Window,
     SystemColors.WindowText,
     Color.Yellow, Color.Blue);
  

  Good Luck

• • Reply
  

  NC01

  All-Star

  82577 Points

  15430 Posts

  MVP

  Re: Highlight text in Textbox using javascript

  Sep 27, 2008 02:05 PM|LINK

  yasserzaid

  Hi

  try these examples

  1)

  <input name="txtFirstName" type="text"
   id="txtFirstName"
   onfocus= "this.style.backgroundColor='Yellow'; this.style.color = 'Blue';"
   onblur="this.style.backgroundColor='Window'; this.style.color='WindowText';"/>

  2)

  void SetInputControlColors(WebControl ctl,
     Color backColor, Color foreColor,
     Color focusBackColor,  Color focusForeColor)
  {
     string jsOnFocus = string.Format(
        "this.style.backgroundColor = '{0}';" +
        "this.style.color = '{1}';",
        focusBackColor.Name, focusForeColor.Name);
     string jsOnBlur = string.Format(
        "this.style.backgroundColor = '{0}';" +
        "this.style.color = '{1}';",
        backColor.Name, foreColor.Name);
     ctl.Attributes.Add("onfocus", jsOnFocus);
     ctl.Attributes.Add("onblur", jsOnBlur);
  }

  Using the SetInputControlColors method is trivial:

  
  SetInputControlColors(txtFirstName,
     SystemColors.Window,
     SystemColors.WindowText,
     Color.Yellow, Color.Blue);
  

  Good Luck

  And where does that code hilite the text in the TextBox, which was the original question? All it does is change the colors in the TextBox on focus and on blur. Mooncoder's post is all that is needed.

  NC...

   

• • Reply
  

  Sushimdudi

  Member

  26 Points

  70 Posts

  Re: Highlight text in Textbox using javascript

  Oct 15, 2008 08:48 PM|LINK

   Hi Everyone,

  I have a login page and a error message occurs when wrong password or username is filed. All I want is to highlight the field or textbox containing the error and white space around the field. All my work is in .ascx files. Also, please let me know where I have to add the code which you will provide me in the files.
  

• • Reply
  

  NC01

  All-Star

  82577 Points

  15430 Posts

  MVP

  Re: Highlight text in Textbox using javascript

  Oct 16, 2008 11:37 AM|LINK

  Sushimdudi

   Hi Everyone,

  I have a login page and a error message occurs when wrong password or username is filed. All I want is to highlight the field or textbox containing the error and white space around the field. All my work is in .ascx files. Also, please let me know where I have to add the code which you will provide me in the files.
  

  Add the code that mooncoder provided into your ascx file.

  NC...

   

• • Reply
  

  Sushimdudi

  Member

  26 Points

  70 Posts

  Re: Highlight text in Textbox using javascript

  Oct 16, 2008 01:13 PM|LINK

   

  Where should I put the code, under which tab? 

  Here is the code:

   <%@ Control Language="vb" AutoEventWireup="false" Codebehind="ctrlWebUserLogin.ascx.vb" Inherits="TimssSolutionSite2004.ctrlWebUserLogin" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
  <%@ Register TagPrefix="Portal" TagName="Title" src="~/controls/DesktopModuleTitle.ascx"%>
  <portal:title id="Title1" runat="server" DisplayTitle="Account Login"></portal:title>
  <script type="text/javascript">
  function clickButton(e, buttonid)
  {
        var bt = document.getElementById(buttonid);
        if (typeof bt == 'object')
        {
              //if(navigator.appName.indexOf("Netscape")>(-1))
              //{
                    if (e.keyCode == 13)
                    {
                          bt.click();
                          return false;
                    }
             // }
             // if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1)){
             //       if (event.keyCode == 13){
             //             bt.click();
             //             return false;
             //       }
             // }             
        }
  }
  </script>
  <asp:panel id="pnlMain" runat="server">
      <TABLE id="Table1" cellSpacing="0" cellPadding="2" border="0" runat="server">
          <TR>
              <TD colspan="2">
                  <TABLE id="tblError" cellSpacing="0" cellPadding="12" border="1" runat="server">
                      <TR>
                          <TD>
                              <asp:Label id="lblLoginMsg" runat="server" BorderWidth="0px" EnableViewState="False" ForeColor="Black"></asp:Label></TD>
                      </TR>
                  </TABLE>
              </TD>
          </TR>
          <TR>
              <TD><LABEL for="<%=txtUserName.ClientID%>">&nbsp;Email address</LABEL>
                  <asp:Label id="lblUserName" runat="server" EnableViewState="False" cssclass="textlabelnormal"
                      Visible="false">Email address</asp:Label></TD>
              <TD>
                  <asp:TextBox id="txtUserName" runat="server" EnableViewState="False" autocomplete="ON" MaxLength="100"
                      Width="130px"></asp:TextBox>
                  <asp:Label id="lblErrorUserName" runat="server" ForeColor="Red" Visible="False">lblErrorUserName</asp:Label></TD>
          </TR>
          <TR>
              <TD><LABEL for="<%=txtPassword.ClientID%>">&nbsp;Password:</LABEL>
                  <asp:Label id="lblPassword" runat="server" cssclass="textlabelnormal" autocomplete="ON" Visible="False">Password</asp:Label></TD>
              <TD>
                  <asp:TextBox id="txtPassword" runat="server" EnableViewState="False" Width="130px" MaxLength="20"
                      TextMode="Password"></asp:TextBox>
                  <asp:Label id="lblErrorPassword" runat="server" ForeColor="Red" Visible="False">lblErrorPassword</asp:Label></TD>
          </TR>
          <TR>
              <td>&nbsp;</td>
              <TD align="center">
                  <asp:CheckBox id="chkRememberMe" runat="server" EnableViewState="False"></asp:CheckBox>
                  <asp:Label id="lblRemeberMe" runat="server">Remember me on this computer</asp:Label></TD>
          </TR>
          <TR>
              <td>&nbsp;</td>
              <TD align="center">
                  <TABLE>
                      <TR>
                          <TD>
                              <asp:Button id="btnLogin" accessKey="L" runat="server" cssClass="AllButtons" Text="Login"></asp:Button></TD>
                          <TD>
                              <TABLE>
                                  <TR>
                                      <TD align="center">
                                          <asp:HyperLink id="hlnkForgotPassword" runat="server" CssClass="smalllinks">I can't access my account</asp:HyperLink></TD>
                                  </TR>
                                  <TR>
                                      <TD noWrap align="center">
                                          <asp:HyperLink id="hlnkNewAccount" runat="server" CssClass="smalllinks">Register</asp:HyperLink></TD>
                                  </TR>
                              </TABLE>
                          </TD>
                      </TR>
                  </TABLE>
              </TD>
          </TR>
          <TR>
              <TD noWrap align="center" colspan="2"></TD>
          </TR>
      </TABLE>
  </asp:panel>&nbsp;
  
  

   

   

  • Edited by Sushimdudi on Oct 16, 2008 01:26 PM
  • Edited by Sushimdudi on Oct 16, 2008 01:30 PM
• • Reply
  

  Sushimdudi

  Member

  26 Points

  70 Posts

  Re: Highlight text in Textbox using javascript

  Oct 16, 2008 01:25 PM|LINK

  Where should I put it? 

  Here is the code:

   

  <%@ Control Language="vb" AutoEventWireup="false" Codebehind="ctrlWebUserLogin.ascx.vb" Inherits="TimssSolutionSite2004.ctrlWebUserLogin" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
  <%@ Register TagPrefix="Portal" TagName="Title" src="~/controls/DesktopModuleTitle.ascx"%>
  <portal:title id="Title1" runat="server" DisplayTitle="Account Login"></portal:title>
  <script type="text/javascript">
  function clickButton(e, buttonid)
  {
        var bt = document.getElementById(buttonid);
        if (typeof bt == 'object')
        {
              //if(navigator.appName.indexOf("Netscape")>(-1))
              //{
                    if (e.keyCode == 13)
                    {
                          bt.click();
                          return false;
                    }
             // }
             // if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1)){
             //       if (event.keyCode == 13){
             //             bt.click();
             //             return false;
             //       }
             // }            
        }
  }
  </script>
  <asp:panel id="pnlMain" runat="server">
      <TABLE id="Table1" cellSpacing="0" cellPadding="2" border="0" runat="server">
          <TR>
              <TD colspan="2">
                  <TABLE id="tblError" cellSpacing="0" cellPadding="12" border="1" runat="server">
                      <TR>
                          <TD>
                              <asp:Label id="lblLoginMsg" runat="server" BorderWidth="0px" EnableViewState="False" ForeColor="Black"></asp:Label></TD>
                      </TR>
                  </TABLE>
              </TD>
          </TR>
          <TR>
              <TD><LABEL for="<%=txtUserName.ClientID%>">&nbsp;Email address</LABEL>
                  <asp:Label id="lblUserName" runat="server" EnableViewState="False" cssclass="textlabelnormal"
                      Visible="false">Email address</asp:Label></TD>
              <TD>
                  <asp:TextBox id="txtUserName" runat="server" EnableViewState="False" autocomplete="ON" MaxLength="100"
                      Width="130px"></asp:TextBox>
                  <asp:Label id="lblErrorUserName" runat="server" ForeColor="Red" Visible="False">lblErrorUserName</asp:Label></TD>
          </TR>
          <TR>
              <TD><LABEL for="<%=txtPassword.ClientID%>">&nbsp;Password:</LABEL>
                  <asp:Label id="lblPassword" runat="server" cssclass="textlabelnormal" autocomplete="ON" Visible="False">Password</asp:Label></TD>
              <TD>
                  <asp:TextBox id="txtPassword" runat="server" EnableViewState="False" Width="130px" MaxLength="20"
                      TextMode="Password"></asp:TextBox>
                  <asp:Label id="lblErrorPassword" runat="server" ForeColor="Red" Visible="False">lblErrorPassword</asp:Label></TD>
          </TR>
          <TR>
              <td>&nbsp;</td>
              <TD align="center">
                  <asp:CheckBox id="chkRememberMe" runat="server" EnableViewState="False"></asp:CheckBox>
                  <asp:Label id="lblRemeberMe" runat="server">Remember me on this computer</asp:Label></TD>
          </TR>
          <TR>
              <td>&nbsp;</td>
              <TD align="center">
                  <TABLE>
                      <TR>
                          <TD>
                              <asp:Button id="btnLogin" accessKey="L" runat="server" cssClass="AllButtons" Text="Login"></asp:Button></TD>
                          <TD>
                              <TABLE>
                                  <TR>
                                      <TD align="center">
                                          <asp:HyperLink id="hlnkForgotPassword" runat="server" CssClass="smalllinks">I can't access my account</asp:HyperLink></TD>
                                  </TR>
                                  <TR>
                                      <TD noWrap align="center">
                                          <asp:HyperLink id="hlnkNewAccount" runat="server" CssClass="smalllinks">Register</asp:HyperLink></TD>
                                  </TR>
                              </TABLE>
                          </TD>
                      </TR>
                  </TABLE>
              </TD>
          </TR>
          <TR>
              <TD noWrap align="center" colspan="2"></TD>
          </TR>
      </TABLE>
  </asp:panel>&nbsp;
  

   

  Thanks .
  

  • Edited by Sushimdudi on Oct 16, 2008 01:29 PM
• • Reply
  

  NC01

  All-Star

  82577 Points

  15430 Posts

  MVP

  Re: Highlight text in Textbox using javascript

  Oct 16, 2008 01:29 PM|LINK

  Sushimdudi

  
  Where should I put the code, under which tab?
  

  What "tab" are you referring to? I already said into the .ascx file.

  yourFile.ascx:

  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>

  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

  <script type="text/javascript">
  <!--
  function highlightTextBox()
  {
   document.getElementById('<%= TextBox1.ClientID %>').focus();
   document.getElementById('<%= TextBox1.ClientID %>').select();
  }
  // -->
  </script>

  NC...