Input clear button

asked 2020-11-30 22:58:03 +0800

ivtu gravatar image ivtu
11 2


what is the easiest way to add clear button to any enabled (non-readonly and non-disabled) 'input' component (textbox, bandbox, etc.)? I am using ZK 9.1. Something similar to 'z-searchbox-clear' in ZK 9.5

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2020-12-01 17:13:43 +0800

cor3000 gravatar image cor3000
5868 2 7
ZK Team

The easiest is to just add a clear button next to the input, and call setValue(null) in an onClick listener. You can then use CSS to change the appearance. Or use an <inputgroup> to plug them together.

e.g.: https://zkfiddle.org/sample/150nmnb/1-clear-input-button

ZK's built-in way to provide a different component appearance would be to implement a custom widget mold and implement the behavior using JS. However that's not a very simple task. And the various input widgets have different DOM stuctures, some are just a plain <input> and others consist of more nested elements. Changing the structure will require to adjust/customize the styles as well.

In the end you won't have an easy life anyway since some browsers provide this clear icon by default, others don't and you'll have to detect/handle this for all future browser versions/changes (some browsers don't even 'want' to be detected ...).

My personal opinion is, that I pick a certain browser for it's provided features. If I prefer other features I'll pick this browser, if every website overrides the default browser features I'd be mildly annoyed. However that's my personal opinion.

link publish delete flag offensive edit

answered 2020-12-03 16:13:05 +0800

ivtu gravatar image ivtu
11 2

Thanks a lot for quick and detail answer

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

1 follower



Asked: 2020-11-30 22:58:03 +0800

Seen: 12 times

Last updated: Dec 03 '20

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