Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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 .../>
<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.
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
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);
}
});
@Senthil
You can try to change
jq(this)
to
jq(this.getInputNode())
then it should work
Wow. Great. It works now. Thank you very much benbai.
Hi As usual, for new comers, i posted step by step example here
Asked: 2011-05-25 05:49:01 +0800
Seen: 689 times
Last updated: May 07 '13