0

How to put watermark on a bandbox?

asked 2018-12-04 22:44:23 +0800

PopCorn gravatar image PopCorn
1

updated 2018-12-04 22:58:10 +0800

I would like to know how to put watermark on a bandbox. I used c:onBind="jq(this).Watermark('Code', 'gray')" with .js in textbox and worked fine, however, this does not work on the bandbox. Help me :)

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2018-12-06 12:49:59 +0800

cor3000 gravatar image cor3000
4293 1 7
ZK Team

I think these kind of watermark plugins are no longer necessary (just to display a placeholder text for empty inputs):

Since version 6.5.0 the InputElements support the placeholder property for HTML5 enabled browsers:

Unless you need to work with very old ZK versions and browsers you can just use it like this (runnable zkfiddle):

<bandbox placeholder="Code"/>

If you still need to use the plugin (old versions or special behaviour only provided by the plugin): Since you didn't provide which jquery plugin you were trying to integrate I can only guess that the plugin requires you to target an HTML-<input>-element. For combowidgets such as combobox/datebox/bandbox (which consist of multiple dom elements) you have to select the input node explicitely by calling InputWidget.getInputNode()

So this should work (still I couldn't read your Watermark API doc so I can't be 100% sure)

c:onBind="jq(this.getInputNode()).Watermark('Code', 'gray')"

I hope the placeholder is already enough, otherwise you need to check the docs of your 3rd party lib. Or give me a link to the docs so I can read the manual and suggest how ZK can provide the information needed.

link publish delete flag offensive edit
0

answered 2018-12-07 20:43:55 +0800

PopCorn gravatar image PopCorn
1

I'm using the 5.0.8 version of ZK.

GetInputNode () did not work here. I would like to know if there is any way to update ZK without having to change the lines of code of my project, considering that when updating the version of ZK in the project, it gave several errors in the java code.

If the update is not possible, I'd like to know some solution. Here is the JavaScript used to make the watermark:

(function($) { var map=new Array(); $.Watermark = { ShowAll:function(){ for (var i=0;i<map.length;i++){ if(map[i].obj.val()="=""){" map[i].obj.val(map[i].text);="" <br=""> map[i].obj.css("color",map[i].WatermarkColor); }else{ map[i].obj.css("color",map[i].DefaultColor); } } }, HideAll:function(){ for (var i=0;i<map.length;i++){ if(map[i].obj.val()="=map[i].text)" map[i].obj.val("");="" <br=""> } } }

$.fn.Watermark = function(text,color) {
    if(!color)
        color="#aaa";
    return this.each(
        function(){     
            var input=$(this);
            var defaultColor=input.css("color");
            map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
            function clearMessage(){
                if(input.val()==text)
                    input.val("");
                input.css("color",defaultColor);
            }

            function insertMessage(){
                if(input.val().length==0 || input.val()==text){
                    input.val(text);
                    input.css("color",color);   
                }else
                    input.css("color",defaultColor);                
            }

            input.focus(clearMessage);
            input.blur(insertMessage);                              
            input.change(insertMessage);

            insertMessage();
        }
    );
};

})(jQuery);

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

Follow
1 follower

RSS

Stats

Asked: 2018-12-04 22:44:23 +0800

Seen: 8 times

Last updated: Dec 07

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