0

I am trying use this jQuery mask input plugin that will force users to enter alphanumeric values, a period and a space.

I am trying to allow alphanumeric(10 bytes) with the statement below.

$('#CommentsTextBox').setMask({ mask: '****' });

However, it does not allow any user input. I am applying inputmasks to other controls on my page just fine.

If I comment out this statement then I can enter values.

Here is the the code for the control in the .aspx 

<asp:PlaceHolder ID="CommentsPlaceHolder" runat="server">
    <asp:TextBox ID="CommentsTextBox" CssClass="longTextBox" runat="server" MaxLength="150" TextMode="MultiLine" Rows="4" ClientIDMode="Static" />
</asp:PlaceHolder>
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
KentE
  • 77
  • 11
  • ' $('#CommentsTextBox').setMask({ mask: '**********' });' – KentE Jan 30 '14 at 16:59
  • What plug-in are you talking about? The first one that shows up in Google, [Igor Escobar's](http://igorescobar.github.io/jQuery-Mask-Plugin/) uses a different syntax. You should also post the relevant HTML. – Álvaro González Jan 30 '14 at 17:05
  • I am using: fabiomcosta / jquery-meiomask plugin, setmask function. Below is code in external .js file used by site. – KentE Jan 30 '14 at 19:36
  • 'masks: { 'phone': { mask: '(99) 9999-9999' }, 'phone-us': { mask: '(999) 999-9999' }, 'cpf': { mask: '999.999.999-99' }, 'cnpj': { mask: '99.999.999/9999-99' }, 'date': { mask: '39/19/9999' }, //uk date 'date-us': { mask: '19/39/9999' }, 'cep': { mask: '99999-999' }, 'time': { mask: '29:59' }, 'cc': { mask: '9999 9999 9999 9999' }, //credit card mask' – KentE Jan 30 '14 at 19:44
  • Can't seem to post it correctly here. Basically there is a setmask function that can be called by another external .js file that enables mask on textbox. Didn't dig deep enough before initial question. Must be something about this textbox that is different than rest. Here is ASPX: – KentE Jan 30 '14 at 19:48
  • – KentE Jan 30 '14 at 19:53
  • When you need to add further details please **edit** the question and post the relevant info there. Code in comments is unreadable. – Álvaro González Jan 31 '14 at 08:11

1 Answers1

1

Here is a fiddle demonstrating usage, I included a textarea since that is what your control will be rendered as.

The reason it's not working for you is because you're using the wrong ID.

There are 3 different types of IDs in ASP. (you can find more info here)

  1. ID — this is the ID you specify in markup or by setting the control's ID property.
  2. UniqueID — this is an ID that is generated by ASP.NET for use by code that runs on the server.
  3. ClientID — this is an ID that is generated by ASP.NET for use by client code (it is rendered as the value of the id attribute in HTML).

Note #3, this is the property you need to use in order to access the ID of the rendered control.

In your case, the rendered ID of your textbox will probably look something like this..

<textarea ID='CommentsPlaceHolder?CommentsTextBox' />

The reason this isn't working for you, is because you have no controls with an ID of CommentsTextBox

A common practice is to do something like this..

var Members =
{
    CommentsTextBox: $("#<%=CommentsTextBox.ClientID %>"),
    StartDateCalendarText: $('#<%=StartDateCalendarText.ClientID %>') 
}

$(document).ready(function()
{
    Members.CommentsTextBox.setMask({ 'mask': '**********' });
    Members.StartDateCalendarText.setMask({ 'mask': '99/99/9999' });
});
Kevin
  • 2,752
  • 1
  • 24
  • 46
  • Hey Kevin, thanks for response. This is throwing a Javascript error. Also, the jquery line below works fine for validating date textbox. Also, I will attempt to include ASPX for comment box. – KentE Jan 31 '14 at 16:27
  • $('#StartDateCalendarText').setMask({ mask: '99/99/9999' }); – KentE Jan 31 '14 at 16:28
  • – KentE Jan 31 '14 at 16:28
  • ? – KentE Jan 31 '14 at 16:55
  • @KentE No, the multiline setting just means that the control will be rendered as a ` – Kevin Jan 31 '14 at 17:25
  • @KentE I added this new control to my post, just be sure you're accessing the appropriate Id and it should work for you. I also updated my fiddle http://jsfiddle.net/gKuaH/14/ – Kevin Jan 31 '14 at 17:32
  • @KentE if you're still having problems you need to edit your original post and show us some code – Kevin Jan 31 '14 at 17:34