Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I have applied masking on phone fields. I am facing one issue.
Suppose you have applied masking on phone for ("(999) 999-9999") format. ZK will prefill the phone field value with masked only if phone field value size is 10. If size of phone field value is less than 10 than in ZK will prefill the phone text box with blank.
I have followed below link.
http://www.zkoss.org/zkdemo/effects/form_effect
I have written below code on my zul file.
<script type="text/javascript"
src="/resource/js/jquery.maskedinput-1.2.2.min.js" />
<script type="text/javascript">
zk.afterMount(function() { $.mask.definitions['A']='[A-Z]';
$.mask.definitions['m']='[01]';
$.mask.definitions['d']='[0123]';
$.mask.definitions['y']='[12]';
jq("$phone1").mask("(999) 999-9999");
jq("$phone2").mask("(999) 999-9999");
jq("$phone3").mask("(999) 999-9999");
});
</script>
See Here you will get phone masking in ZK with jquery.
"prefill the phone field value with masked" Means user enters 9560731375 in phone number field then phone number is showing (956) 073-1375 in phone number but if user enters only 95607 in phone field and click out side of this phone field then phone field is showing blank but it should display (956) 07.
1. Here is the complete sampleof my zul file
<zk xmlns:x="xhtml" xmlns:zk="zk"> <window width="100%" height="100%">
<borderlayout width="100%" height="100%">
<center border="none" sclass="sub-tab-panel">
<vlayout vflex="1" hflex="1" sclass="vertical-scroll">
<x:table>
<x:tr>
<x:td width="50px" align="right">
<label value="Phone Number" />
</x:td>
<x:td>
<textbox width="316px" **maxlength="23"**
id="phone1" height="15px" />
</x:td>
</x:tr>
</x:table>
</vlayout>
</center>
</borderlayout>
<script type="text/javascript"
src="jquery.maskedinput-1.2.2.min.js" />
<script type="text/javascript">
zk.afterMount(function() { $.mask.definitions['A']='[A-Z]';
$.mask.definitions['m']='[01]';
$.mask.definitions['d']='[0123]';
$.mask.definitions['y']='[12]';
jq("$phone1").mask("(999) 999-9999");
jq("$phone2").mask("(999) 999-9999");
jq("$phone3").mask("(999) 999-9999");
});
</script>
</window>
</zk>
2. ZK Version: 6.0.3.1
@Ashishd if any tool or component not working as you want its does not mean it have any bug
Hi sjoshi,
I am not sure what you want to say. Let me clarify again for the sake of clarity. Masking functionality is provided by the JQeury masked input plugin. Judging from the plugin demo it seems the behavior iamsudhir4u is looking for is not supported by the plugin so there is little ZK/community here can do about it as it has to be provided by the plugin. Hence I suggested to post a bug (or a feature request) to the issue tracker of plugin (It seems it is hosted on github). What else do you expect from ZK community here?
Can not reproduce even with your example. The textbox shows mask correctly irrespective of what maxlength is set. BTW I used https://zk-sample-code.googlecode.com/svn-history/r27/trunk/WebContent/samples/sam/inputbox/js/jquery.maskedinput-1.2.2.js ... Also what do you mean by "prefill the phone field value with masked"?
Asked: 2013-01-02 09:01:37 +0800
Seen: 118 times
Last updated: Jan 22 '13
@ashishd I made a Small change in their file and it work for me.
sjoshi ( 2013-01-04 04:56:34 +0800 )edit