Friday 10 February 2012

Input mask on textbox in SharePoint list form

Yesterday on LinkedIn I saw one discussion where one of group member asked a query about how to create Input mask on text box in SharePoint List form.

While searching on internet I found this post. In this post Author opened the new form in SharePoint designer, added custom new form and then added jQuery code on page.

But what if I do not have SharePoint designer.

So instead opening page in SharePoint designer, I added CEWP on NewForm.aspx

And then I did some changes in original code, Instead of custom style I used Title of the field. And I inserted below code in Source editor of the CEWP.

<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" ></script>
<script language="javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js" type="text/javascript" ></script>
<script language="javascript" type="text/javascript">

jQuery(function($){
   $("input[title='Phone']").mask("(999) 999-9999? Ext.99999");
});

</script>

And it worked for me. Have a look at below screenshot.








Reference:
http://www.a2zdotnet.com/View.aspx?Id=194 (Original post)
http://digitalbush.com/projects/masked-input-plugin/





2 comments:

  1. i designed the form using infopath and this isn''t working, any clue why?

    ReplyDelete
  2. Hi Rodney,

    I believe you cannot add java script in infopath browser form. Also the rendered markup of an InfoPath form is different than what rendered by SharePoint list form, so the above script will not work in infopath.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...