0

Watermark and masks don't work on textboxes in mold 'rounded' [closed]

asked 2011-05-25 05:49:01 +0800

cvarona gravatar image cvarona
554 1 6

Hi there,

when target textboxes are in mold rounded watermarks just don't appear and masked textboxes become read-only; just try the following:

<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 mold="rounded" id="username" width='150px' />
                Watermark
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Phone :" />
                <textbox mold="rounded" id="phone" width='150px' />
                Mask : (999) 999-9999
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Birthday :" />
                <textbox mold="rounded" id="date" width='150px' />
                <label value="Mask : m9/d9/y999" />
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Country Code:" />
                <textbox mold="rounded" id="country" width='150px' />
                <label value='Mask : AA (Upper-Case)' />
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Credit Card:" />
                <textbox mold="rounded" id="cc" width='150px' />
                <label value='Mask : 9999-9999-9999-9999' />
            </hlayout>
             
            <hlayout spacing="20px">
                <label class="name" value="Password: " />
                <textbox mold="rounded" id="pwd" type="password" width="150px" />
            </hlayout>
            <hlayout spacing="20px">
                <label class="name" value="Re-type:" />
                <textbox mold="rounded" 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']='';
            $.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>

And by the way, is there someway to catch the 'onAfterMount' event?

Withd kind regards

César Varona

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by cvarona
close date 2013-05-09 07:28:16

6 Replies

Sort by » oldest newest

answered 2011-05-25 08:14:21 +0800

gekkio gravatar image gekkio flag of Finland
899 1
http://gekkio.fi/blog

When using jQuery plugins, you need to ensure that you are targeting the correct DOM elements.
A textbox with default mold is rendered as:

<input .../>

A textbox with rounded mold is rendered as:
<i ...>
  <input ... />
  <i ... />
</i>

When you use the $id selector, you are selecting the top DOM elements of components. So in the rounded mold, you are actually trying to apply a mask/watermark to an i element.

In this case you should try jq("$id input"). That means that you will be applying the mask/watermark to input elements under the top element (= i element). That should apply the masks/watermark correctly.

link publish delete flag offensive edit

answered 2011-05-25 09:12:11 +0800

cvarona gravatar image cvarona
554 1 6

Thanx a lot Gekkio for your fast reply; anyway, it looks to me as if it would make more sense for zk to assign the id to the actual input elements rather than to the just beautifying <i>s.

With kind regards

César Varona

link publish delete flag offensive edit

answered 2013-05-04 19:09:53 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

updated 2013-05-04 19:22:11 +0800

Hi gekkio,

I also have the same issue. Thank you very much for your explanation. I understood, but i dont know how to change the stuff. In my case, i am using this on the java side as below

package com.product.webapp.component;

import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.EventListener; import org.zkoss.zk.ui.event.Events; import org.zkoss.zul.Textbox;

public class MaskBox extends Textbox {

/**
 * 
 */
private static final long serialVersionUID = 1L;
private String format;


public String getFormat() {
    return format;
}

public void setFormat(String format) {
    this.format = format;
}


@SuppressWarnings({ "unchecked", "rawtypes" })
public MaskBox() {
    setMold("rounded");
    this.addEventListener(Events.ON_CREATE, new EventListener() {
        @Override
        public void onEvent(Event event) throws Exception {
            String mask = "jq(this).mask('" + format + "');";
            setWidgetListener("onBind", mask);

        }
    });
}

}

Can you please help me how to target the input element here. You can also refer my other post related to this subject here.

I just tried myself as follows , but no luck

@SuppressWarnings({ "unchecked", "rawtypes" })
public MaskBox() {
    setMold("rounded");

    this.addEventListener(Events.ON_CREATE, new EventListener() {
        @Override
        public void onEvent(Event event) throws Exception {
            /*String mask = "jq(this).mask('" + format + "');";*/
            String mask = "jq($" + getId() +").mask('" + format + "');";
            System.out.println(mask);
            setWidgetListener("onBind", mask);


        }
    });
link publish delete flag offensive edit

answered 2013-05-05 04:27:12 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

@Senthil

You can try to change

jq(this)

to

jq(this.getInputNode())

then it should work

link publish delete flag offensive edit

answered 2013-05-05 07:08:55 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Wow. Great. It works now. Thank you very much benbai.

link publish delete flag offensive edit

answered 2013-05-07 13:04:26 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Hi As usual, for new comers, i posted step by step example here

link publish delete flag offensive edit

Question tools

Follow

RSS

Stats

Asked: 2011-05-25 05:49:01 +0800

Seen: 687 times

Last updated: May 07 '13

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