使用字段掩码并强制光标向左移动
本文关键字:光标 左移 移动 字段 掩码 | 更新日期: 2023-09-27 18:32:54
这与这个问题并不相同,但非常相似。
我正在使用 ASP.Net 并且需要或多或少地做同样的事情,但希望它可以在 ASP 端完成。
我的相关代码是这样的:
<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>
与链接的问题一样,我的问题是当用户在文本框内单击时,他们有时会从中间开始,我需要将光标一直强制向左移动。 有没有办法从ASP中强制光标一直向左移动,或者这只能在代码隐藏中完成?
javascript
jQuery
来实现这一点,并通过在鼠标向上事件上将选择范围设置为0,0
来实现:
$(document).ready(function(){
$(".resetCursor").mouseup(function () {
this.setSelectionRange(0,0);
});
});
http://jsfiddle.net/6m8stbo7/1/
然后将类resetCursor
添加到要使用此行为扩展的TextBox
控件。
<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>
解释:
resetCursor
是jQuery
用来选择特定 DOM 元素的css stylesheet class
。通常的做法是使用 css 类在一组 DOM-Elements 上"声明"某些行为,然后使用 jquery 一次性"激活"该行为。编辑:请注意,resetCursor
是一个任意名称,您可以根据需要选择另一个名称。
以下是对基本jQuery选择器的良好介绍(在此示例中我使用的是类选择器):
http://api.jquery.com/category/selectors/basic-css-selectors/
这个答案使用 jQuery - 我希望你知道它,否则这不好:)如果您知道它 - 使用 Ovm2 的答案只需像CssClass="textbox resetCursor"
一样修复您的 ASP.NET 标记,或者使用 jQuery 使用 .addClass() 以编程方式执行此操作,因此
$(document).ready(function(){//once DOM is loaded
$(".textbox").addClass('resetCursor');
$(".resetCursor").mouseup(function () {
this.setSelectionRange(0,0);
});
});
如果你不熟悉jQuery - 好吧,你必须尽快开始学习它!:)
附言最初我打算添加注释以由 Ovm 回答,但我未能在那里使用迷你标记格式化代码示例。并且不要忘记学习''刷新有关使用的信息CSS选择器,因为这是非常重要的,嗯,它不仅对于jQuery,而且在HTML上度过美好时光都是必不可少的。希望有帮助:)
您可以在javascript中使用createTextRange方法来移动光标位置。以下功能将帮助您移动位置以开始。
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();
}
}
}
您可以将 TextMode="Multiline" 属性用于文本框