A zk-textbox which doesn't contain pasted value

Question

How can I create a textbox that prevent copy and paste in ZK? Cut/copy/paste are not allowed in zk-textbox.

Ctrl+V and mouse right click are handled, but what about drag and drop?

Answer 1

You can use javascript to disable dragging of text for certain components. There are several ways to apply such code to components, he following uses an sclass as a marker, which is quite convenient if you only need it for a small number of textboxes:

<textbox value="Drag Me!" /> 
<textbox value="Can't drag me!" sclass="nodrag" /> 
<textbox placeholder="Can drop here..." /> 
<textbox placeholder="...but not here" sclass="nodrop" /> 

<script type="text/javascript">
    document.body.addEventListener("dragstart", function(e) {
        if (e.target.className.indexOf("nodrag") > -1) {
            e.preventDefault();
            return false;
        }                           
    }, false);
    document.body.addEventListener("dragover", function(e) {
        if (e.target.className.indexOf("nodrop") > -1) {
            e.preventDefault();
            e.dataTransfer.effectAllowed = "none";
            e.dataTransfer.dropEffect = "none";
            return false;
        }                           
    }, false);
</script>

You can also do it via zk.afterLoad:

zk.afterLoad('zul.inp', function() {
    var xTextbox = {};
    zk.override(zul.inp.Textbox.prototype, xTextbox , {
        bind_  : function() {
            this.$supers('bind_', arguments);
            if (this.$n().className.indexOf("nodrag") > -1) {
                this.domListen_(this.$n(), "onDragstart", function(event) {
                    event.stop();
                    return false;
                }); 
            }
            if (this.$n().className.indexOf("nodrop") > -1) {
                this.domListen_(this.$n(), "onDragover", function(event) {
                    event.stop();
                }); 
            }
        }
    });
});

This focusses on how to apply this using zk, but in fact it's just plain javascript. You can read here for more info: disable text drag and drop