0

How to put watermark on a bandbox?

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

PopCorn gravatar image PopCorn
3 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

3 Answers

Sort by ยป oldest newest most voted
0

answered 2018-12-17 10:24:01 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

When upgrading your version results in compiler errors, there's no way around fixing them manually.

I didn't try your watermark script as I still believe it's obsolete, but I assume you'll understand how the jq selectors work in order to apply it if still needed.

In this updated zkfiddle (which also runs under ZK 5.0.8) I simply set the HTML5 placeholder attribute on the input element in a single line:

<zk xmlns:w="client">
  <style>
    input::placeholder {
      color: gray;
    }
  </style>
  <script>
    function initWatermark(wgt, placeholder) {
      jq(wgt).find('input').andSelf().attr('placeholder', placeholder);
    }
  </script>
  <vlayout>
    <textbox w:onBind="initWatermark(this, 'Name');"/>
    <intbox w:onBind="initWatermark(this, 'Age');"/>
    <combobox w:onBind="initWatermark(this, 'Gender');">
      <comboitem label="Male"/>
      <comboitem label="Female"/>
    </combobox>
    <bandbox w:onBind="initWatermark(this, 'Other');"/>
  </vlayout>
</zk>
link publish delete flag offensive edit
0

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

cor3000 gravatar image cor3000
4406 2 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
3 1

updated 2018-12-17 09:55:35 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

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);                    
                    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("");                 
            }
        }
    }

    $.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: 13 times

Last updated: Dec 17 '18

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