1

Placeholder with phonemasking in IE11 Browser not working

asked 2014-04-02 06:45:08 +0800

jaideep gravatar image jaideep flag of India
178 5

updated 2014-04-02 06:46:30 +0800

This is my zul file, when I run this code in the IE 11 browser then placeholder works but phone masking doesn't work in the phone field.

If we remove placeholder then its masking working but there is also some issues came. I want this masking works in IE11 browser properly. Please provide me solution if anyone have .

 <zk xmlns:c="client">
        <style>
        .water-mark {
            color: gray; font-style: italic;
        }
        .form {
            border: 1px solid #E1E1E1;
            background: url('../widgets/effects/form_effect/img/bg.png');
            padding: 20px 20px;
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
        }
        .form .name {
            display: block;
            width: 100px;
            text-align: center;
        }
        </style>

        <script><![CDATA[
            function pwdValid(pwd2) {
                var valLabel = jq("$pwd_val");
                if (pwd2.getValue() == "") {
                    zk.Widget.$(valLabel).setValue("Client Side Validation");
                } else if (pwd2.getValue() != zk.Widget.$(jq("$pwd")).getValue()) {
                    zk.Widget.$(valLabel).setValue("Not Match !")
                } else {
                    zk.Widget.$(valLabel).setValue("OK !")
                };
            }
        ]]></script>
        <div width="500px" class="form">
            <vlayout spacing="7px">
                <label value="On-line Shopping Info" style="font-size:16px;font-weight:bold;color:gray;" />
                <hlayout spacing="20px">
                    <label class="name" value="Name :" />
                    <textbox id="username" width='150px' />
                    Watermark
                </hlayout>
                <hlayout spacing="20px">
                    <label class="name" value="Phone :" />
                    <textbox id="phone" width='150px'  placeholder="jai" />
                    Mask : (999) 999-9999
                </hlayout>
                <hlayout spacing="20px">
                    <label class="name" value="Birthday :" />
                    <textbox id="date" width='150px' />
                    <label value="Mask : m9/d9/y999" />
                </hlayout>
                <hlayout spacing="20px">
                    <label class="name" value="Country Code:" />
                    <textbox id="country" width='150px' />
                    <label value='Mask : AA (Upper-Case)' />
                </hlayout>
                <hlayout spacing="20px">
                    <label class="name" value="Credit Card:" />
                    <textbox id="cc" width='150px' />
                    <label value='Mask : 9999-9999-9999-9999' />
                </hlayout>

                <hlayout spacing="20px">
                    <label class="name" value="Password: " />
                    <textbox id="pwd" type="password" width="150px" />
                </hlayout>
                <hlayout spacing="20px">
                    <label class="name" value="Re-type:" />
                    <textbox type="password" width="150px" c:onChange='pwdValid(this)' />
                    <label id="pwd_val" value="Client Side Validation" />
                </hlayout>
            </vlayout>
        </div>
        <div id="result" />
        <!-- Load the script -->
        <script type="text/javascript" src="/widgets/effects/form_effect/maskedinput-1.2.2.min.js" />
        <script type="text/javascript" src="/widgets/effects/form_effect/watermarkinput.js" />
        <script type="text/javascript">
            zk.afterMount(function() {
                jq("$username").Watermark("Your Name","gray");

                $.mask.definitions['A']='[A-Z]';
                $.mask.definitions['m']='[01]';
                $.mask.definitions['d']='[0123]';
                $.mask.definitions['y']='[12]';

                jq("$phone").mask("(999) 999-9999");
                jq("$date").mask("m9/d9/y999");
                jq("$country").mask("AA");
                jq("$cc").mask("9999-9999-9999-9999");
            });
        </script>
    </zk>
delete flag offensive retag edit

Comments

Did you use the latest version of Masked Input Plugin? I updated the js plugin from here and it seems to work fine in IE11.

RaymondChao ( 2014-04-03 03:19:33 +0800 )edit

but placeholder works or not and if we enter some numbers in phone masking like 123 and click on another field then it automatically invisible.

jaideep ( 2014-04-03 05:41:36 +0800 )edit
Be the first one to answer this question!
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-04-02 06:45:08 +0800

Seen: 10 times

Last updated: Apr 02 '14

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