Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-2433

Highlight text in a listitem without using nonselectableTag



    • New Feature
    • Resolution: Done
    • Normal
    • 7.0.4
    • 7.0.3
    • Components
    • Security Level: Jimmy
    • None


      Problem Description

      Users want to copy text in a listbox, the current solution is "nonselectableTag".

      <listbox nonselectableTags="span, a">
      	<listhead><listheader> nonselectableTags=" span, a"</listheader></listhead>
          <listitem><listcell><a href="http://www.zkoss.org">www.zkoss.org</a></listcell></listitem>
          <listitem><listcell><label>long text with space</label></listcell></listitem>

      A customer reported that he wants "to be able to select a line by clicking and also select text within the line by clicking and dragging".

      2 issues with nonselectableTag:

      1. It's very tricky to highlight a text by dragging mouse pointer.
        You must be very carefully not to release mouse outside of the text, or zk will think you do not click on a <span> then listbox will select the item and cancel the highlighting. Although double clicking can also highlight the text, but this doesn't work for text with space.
      2. click label cannot select the item.
        So users must be aware of clicking outside of a text to select them. Although this effect is just the result when setting nonselectableTag="span", but it also causes inconvenience when selecting an item. Because users just want to copy text, this behavior looks like a side effect to enable highlighting text.

      Proposed Solution

      If we can distinguish dragging and clicking, we can avoid select an item when mouse dragging. For example, we use window.getSelection() to determine whether if users select a text or not.

      <script type="text/javascript"><![CDATA[
      zk.afterLoad('zul.sel', function () {
      	var oldMethod = {};
      	zk.override(zul.sel.SelectWidget.prototype, oldMethod, {		
      		_shallIgnore: function(evt, bSel){
      		 	var selection = window.getSelection();
      		 	 if(selection.type == "Range") {
      			    return true;
      				return oldMethod._shallIgnore.apply(this, arguments); //call the original method

      Above code is just showing an idea. For IE, getSelection() is only supported since IE 9. Prior to IE 9, we can use document.selection(). (ref http://stackoverflow.com/questions/5421892/getselection-not-working-in-ie)


        Issue Links



              hanhsu hanhsu
              hawk hawk
              0 Vote for this issue
              0 Start watching this issue