0

Facing issue in masking on phone [closed]

asked 2013-01-02 09:01:37 +0800

iamsudhir4u gravatar image iamsudhir4u flag of India
545 7
http://corejavasupport.bl...

updated 2013-01-22 08:37:05 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

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>
delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by sjoshi
close date 2013-02-08 07:17:45

Comments

2

@ashishd I made a Small change in their file and it work for me.

sjoshi ( 2013-01-04 04:56:34 +0800 )edit

8 Answers

Sort by ยป oldest newest most voted
2

answered 2013-01-22 08:31:11 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

See Here you will get phone masking in ZK with jquery.

link publish delete flag offensive edit
2

answered 2013-01-03 06:37:02 +0800

iamsudhir4u gravatar image iamsudhir4u flag of India
545 7
http://corejavasupport.bl...

"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.

link publish delete flag offensive edit
2

answered 2013-01-03 05:20:11 +0800

iamsudhir4u gravatar image iamsudhir4u flag of India
545 7
http://corejavasupport.bl...

updated 2013-01-22 08:29:20 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

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

link publish delete flag offensive edit
1

answered 2013-01-03 11:13:53 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

@Ashishd if any tool or component not working as you want its does not mean it have any bug

link publish delete flag offensive edit
0

answered 2013-01-04 01:14:29 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

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?

link publish delete flag offensive edit
0

answered 2013-01-03 06:55:27 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Well, the jquery maskedinput plugin doesn't support this as seen from the demo Please post a bug to plugin tracker

link publish delete flag offensive edit
0

answered 2013-01-03 05:59:33 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

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"?

link publish delete flag offensive edit
0

answered 2013-01-03 04:05:43 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

can you post a complete sample? Also how do you set the field size? what ZK version are you using?

link publish delete flag offensive edit

Question tools

Follow

RSS

Stats

Asked: 2013-01-02 09:01:37 +0800

Seen: 114 times

Last updated: Jan 22 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More