2

This is not identical to this question, but it's very similar.

I'm using ASP.Net and need to more or less do the same thing, but was hoping it can be done on the ASP side.

My relevant code is such:

<td style="line-height: 230%;">
    <asp:TextBox ID="txtePro" runat="server" CssClass="textbox" Font-Size="Small" Height="18px" Width="100px" Visible="False" Wrap="False" OnTextChanged="txtEPro_OnLeave" AutoPostBack="true"></asp:TextBox>
    <asp:MaskedEditExtender ID="MeeePro" runat="server" Mask="9999999" MaskType="None" TargetControlID="txtePro" PromptCharacter="_" />
    <asp:MaskedEditExtender ID="MeePRD" runat="server" Mask="999999" MaskType="None" TargetControlID="txtePro" PromptCharacter="_" />
    <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtePro" ID="RevePro" ValidationExpression="^[\s\S]{7,7}$" runat="server" ErrorMessage="7 Digits required." ForeColor="White" Font-Size="X-Small"></asp:RegularExpressionValidator>
    <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtePro" ID="RevPRD" ValidationExpression="^[\s\S]{6,}$" runat="server" ErrorMessage="6 Digits required." ForeColor="White" Font-Size="X-Small"></asp:RegularExpressionValidator>
    <asp:TextBox ID="hdntxtePro" runat="server" CssClass="textbox" Font-Size="Small" Height="18px" Width="100px" Visible="False" Wrap="False"></asp:TextBox>
    <asp:DropDownList ID="ddlCIT" runat="server" AutoPostBack="True" CssClass="textbox" Visible="false" Height="20px" OnSelectedIndexChanged="ddlCIT_SelectedIndexChanged" Width="100px"></asp:DropDownList>
    <asp:TextBox ID="txtCIT" runat="server" CssClass="textbox" Height="18px" Width="100px" Visible="False" Font-Size="Small" Wrap="False"></asp:TextBox>
    <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtCIT" ID="RevCIT" ValidationExpression="^[\s\S]{4,}$" runat="server" ErrorMessage="4 Digits required." ForeColor="White" Font-Size="X-Small"></asp:RegularExpressionValidator>
    <asp:MaskedEditExtender ID="meeCIT" runat="server" MaskType="Number" Mask="99.99" TargetControlID="txtCIT" PromptCharacter="_" InputDirection="LeftToRight" />
    <asp:TextBox ID="txtClientID" runat="server" CssClass="textbox" Height="18px" Width="100px" Visible="False" Font-Size="Small" Wrap="False" OnTextChanged="txtClientID_OnLeave" AutoPostBack="true" MaxLength="5"></asp:TextBox>
    <asp:MaskedEditExtender ID="meeClientID" runat="server" MaskType="Number" Mask="99999" TargetControlID="txtClientID" PromptCharacter="_"  InputDirection="LeftToRight" AutoComplete="False" UserTimeFormat="TwentyFourHour"/>
    <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtClientID" ID="RevClientID" ValidationExpression="^[\s\S]{5,5}$" runat="server" ErrorMessage="5 Digits required." ForeColor="White" Font-Size="X-Small"></asp:RegularExpressionValidator>
    <asp:TextBox ID="hdntxtClientID" runat="server" CssClass="textbox" Height="18px" Width="100px" Visible="False" Font-Size="Small" Wrap="False"></asp:TextBox>
    <asp:TextBox ID="txtElasID" runat="server" CssClass="textbox" Height="18px" Width="100px" Wrap="False" Visible="False" Font-Size="Small"></asp:TextBox>
    <asp:MaskedEditExtender ID="meeElas" runat="server" MaskType="None" Mask="99999999" TargetControlID="txtElasID" PromptCharacter="_" />
    <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txtElasID" ID="RevElasID" ValidationExpression="^[\s\S]{8,}$" runat="server" ErrorMessage="8 Digits required." ForeColor="White"></asp:RegularExpressionValidator>
    <asp:TextBox ID="txtEffDate" runat="server" CssClass="textbox" Height="18px" Width="100px" Visible="False" Font-Size="Small" TextMode="Date" Wrap="False"></asp:TextBox>
    <asp:RangeValidator ID="rvDate" runat="server" ControlToValidate="txtEffDate" ErrorMessage="Invalid Date" Type="Date" MinimumValue="01/01/1900" MaximumValue="01/01/2100" Display="Dynamic" ForeColor="White"></asp:RangeValidator>
    <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtEffDate" Format="MM/dd/yyyy"></asp:CalendarExtender>
</td>

As in the linked question, my problem is that when a user clicks inside the text box, they're sometimes starting in the middle and I need the cursor to be forced all the way to the left. Is there a way to force the cursor all the way to the left from within ASP, or is this something that can only be done in the code-behind?

3
  • I will accept an answer that uses Javascript if necessary. Whatever works. We're using IE9, which I understand has some issues with Ctrl+V, as I tried to fix this by disabling the right-click all-together, but then Ctrl+V didn't work in the fields with a mask. Jan 29, 2015 at 15:48
  • Is this not what you want: stackoverflow.com/questions/2127221/… ? Jan 29, 2015 at 15:59
  • did you try on to run the this.setSelectionRange(0,0); on focus event?
    – talsibony
    Feb 5, 2015 at 15:43

4 Answers 4

12
+500

You can achieve that using javascript and jQuery by setting the SelectionRange to 0,0 on the mouseup event:

$(document).ready(function(){
   $(".resetCursor").mouseup(function () {
      this.setSelectionRange(0,0);    
   });
});

http://jsfiddle.net/6m8stbo7/1/

Then add the class resetCursor to the TextBox Controls you want to extend with this behavior.

<asp:TextBox ID="txtePro" runat="server" 
   CssClass="textbox resetCursor" 
   Font-Size="Small" 
   Height="18px" 
   Width="100px" 
   Visible="False" 
   Wrap="False" 
   OnTextChanged="txtEPro_OnLeave" 
   AutoPostBack="true">
</asp:TextBox>

Explanation:

resetCursor is a css stylesheet class that is used by jQuery to select the specific DOM-Elements. It is common practice to use css classes to "declare" certain behavior on a set of DOM-Elements and then use jquery to "activate" that behavior in one go. Edit: Note that resetCursor is an arbitrary name, you could have chosen another name as you please.

Here is a good introduction to the basic jQuery selectors (I'm using the Class-Selector in this example):

http://api.jquery.com/category/selectors/basic-css-selectors/

3
  • Can you edit your answer to explain how/where resetCursor is used on the textbox? I'm not familiar with it, and the examples I've found online don't seem to work. Jan 29, 2015 at 16:19
  • @JohnnyBones Seems you are not familiar with jQuery!?:)
    – vertique
    Jan 30, 2015 at 7:58
  • @JohnnyBones I added an example for the TextBox and how to assign the css class in the CssClass property of the control.
    – ovm
    Jan 30, 2015 at 8:56
2

This answer uses jQuery - I hope you know it, otherwise this no good:) In case you know it - using answer by Ovm2 just fix your ASP.NET markup like CssClass="textbox resetCursor" or do it programmatically with jQuery with .addClass() so

$(document).ready(function(){//once DOM is loaded
   $(".textbox").addClass('resetCursor');
   $(".resetCursor").mouseup(function () {
      this.setSelectionRange(0,0);    
   });
});

In case you aren't familiar with jQuery - well, you have to start learning it asap!:)

P.S. Initially I intended to add the comment to answer by Ovm, but I failed to format code sample with mini-markup there. And don't forget to learn\refresh info about using CSS selectors as this is the ultra important, well, it is simply essential for having good times not only with jQuery, but with HTML at all. Hope that helps:)

1

You can use createTextRange method in javascript to move cursor postion. Following function will help you to move position to start.

function setCaretPosition(elemId) {
var inputEle = document.getElementById(elemId);

if (inputEle != null) {
    if (inputEle.createTextRange) {
        var range = inputEle.createTextRange();
        range.move('character', -1);
        range.select();
    }
    else {
        if (inputEle.selectionStart) {
            inputEle.focus();
            inputEle.setSelectionRange(0, 1);
        }
        else
            inputEle.focus();
    }
  }
}
-2

You can use TextMode="Multiline" property for Textbox

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.