0

Textbox - format input on client side

asked 2012-09-14 15:40:09 +0800

Lesstra gravatar image Lesstra
193 1

Hi,

I need the following behavior:
I want to format the user supplied value in such a way that it disables characters and adds leading zeros up to 7 digits.
So, if user types in "35" the textbox value should immediately update itself to "0000035".

Is this possible, and how, and is there maybe some alternative that I'm missing?

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2012-09-14 16:57:44 +0800

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

You can take help from Here/a].

link publish delete flag offensive edit

answered 2012-09-14 17:09:20 +0800

Lesstra gravatar image Lesstra
193 1

Thanks for the suggestion sjoshi, I always look first in the reference manual, however, this is not much of a help, because I wanted to see if this is possible through javascript on the client.

link publish delete flag offensive edit

answered 2012-09-14 17:22:01 +0800

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

Please provide ZK version because you can write Zscript in ur ZUl page but sometime zscript disable because no one want to use JS if we already using very good framework like ZK.But iw ill suggest you to do server side for security reason.
thanks

link publish delete flag offensive edit

answered 2012-09-14 23:53:16 +0800

jj gravatar image jj
638 3

Lesstra:
Please read this section:
http://books.zkoss.org/wiki/ZK%20Client-side%20Reference/General%20Control/Widget%20Customization

You should override the onChange event on the client side.

link publish delete flag offensive edit

answered 2012-09-17 08:20:57 +0800

Lesstra gravatar image Lesstra
193 1

updated 2012-09-17 09:04:02 +0800

Hi jj,
I already used client side events, but for different purposes and components.
The problem is I don't see in the client reference doc that such an event (onChange) is available for textboxes on the client.
Maybe it is somehow implicitly present...?
See this link and point to me what should I use, or what did I miss?
Thanks.

link publish delete flag offensive edit

answered 2012-09-17 17:59:00 +0800

jj gravatar image jj
638 3

Look at Widget.listen() method and Event description in the client development guide. There are DOM events and Widget Events, and I think you want to listen to widget-level events. I have no first-hand experience with it, so please let me know if it works out.

link publish delete flag offensive edit

answered 2012-09-17 22:59:43 +0800

twiegand gravatar image twiegand
1807 3

Lesstra,

I'm sure others here will give you a more elegant way to do this but here is one way:

<zk xmlns:w="client">
	<script>
		function applyMask(compId, val){
			var pad = "0000000";
			var result = (pad+val).slice(-pad.length);
			compId = '#' + compId;
			jQuery(compId).val(result);
		}
	</script>
	<zscript>
		import org.zkoss.zk.ui.util.GenericForwardComposer;
			
		public class MyController extends GenericForwardComposer {
			Textbox txtbx;
			public void onChangeTextbox(Event event) {
				String maskCommand = "applyMask('" + txtbx.getUuid() + "','" + txtbx.getValue() + "')";
				Clients.evalJavaScript(maskCommand);
			}
		}
	</zscript>
	<window id="main" apply="MyController">
		<textbox id="txtbx" forward="onChange=onChangeTextbox" onCreate="self.focus();">
			<attribute w:name="doKeyPress_">
				function(evt){
					if (!this._shallIgnore(evt, "0123456789"))
					this.$doKeyPress_(evt);
				}
			</attribute>
		</textbox>		
	</window>
</zk>

Hope that sparks an idea or two.

Regards,

Todd

link publish delete flag offensive edit

answered 2012-09-18 08:52:07 +0800

Lesstra gravatar image Lesstra
193 1

Thanks Todd and jj, I'll see what can be done with the suggested ideas.
Regards.

link publish delete flag offensive edit
Your reply
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

RSS

Stats

Asked: 2012-09-14 15:40:09 +0800

Seen: 168 times

Last updated: Sep 18 '12

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