Thursday, January 3, 2019

Move cursor at end after paste in jQuery




Using $(this).html(textstring1) in JavaScript,   the  cursor will be at the top.
The following code is to move cursor to the end:
        $.fn.focusEnd = function() {
            $(this).focus();
            var tmp = $('<span />').appendTo($(this)),
                node = tmp.get(0),
                range = null,
                sel = null;

            if (document.selection) {
                range = document.body.createTextRange();
                range.moveToElementText(node);
                range.select();
            } else if (window.getSelection) {
                range = document.createRange();
                range.selectNode(node);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
            tmp.remove();
            return this;
        }

Example:
function clickother_cflnew($td){
        $.fn.focusEnd = function() {
            $(this).focus();
            var tmp = $('<span />').appendTo($(this)),
                node = tmp.get(0),
                range = null,
                sel = null;

            if (document.selection) {
                range = document.body.createTextRange();
                range.moveToElementText(node);
                range.select();
            } else if (window.getSelection) {
                range = document.createRange();
                range.selectNode(node);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
            tmp.remove();
            return this;
        }
        $td.find('.cfl_new_other').on('paste', function(event){
                event.preventDefault();

                var text = (event.originalEvent || event).clipboardData.getData('text/plain') || prompt('Paste something..');

                window.document.execCommand('insertText', false, text);
                textstring = $(this).html();
                textstring1 = textstring.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
                textstring1 = textstring1.replace(/&nbsp/g, ' ');
                $(this).html(textstring1);
               // $(this).html($(this).html().replace(/<div>/g, '<br>').replace(/<\/div>/g, '<br>'));
                 $(this).focusEnd();


        });
   
        $td.find('.cfl_new_other').unbind('keyup change input').bind("keyup change input",function() {
                el = $(this);
                textstring = el.html();
                textstring1 = textstring.replace(/<div>/g, '<br>').replace(/<\/div>/g, '');
                textstring1 = textstring1.replace(/&nbsp/g, ' ');
                if(textstring1.length >= 500){
                    alert("Maximum 500 characters");
                    el.html( textstring1.substr(0, 500) );
                     el.focusEnd();
                     $(this).parent().find(".charNum").text( " 0 character remaining.");
                } else {
                    $(this).parent().find(".charNum").text((500-textstring1.length) + " characters remaining.");
                }
        });   
}       

Datatable export to excel bug not completly updated according to sorting




When I  click the header column to sort in a table using DataTable,
the export excel is only half columns correct. This is due to that my columns have
input, select and editable div. If  all columns are text, the export after sorting is fine.

I can not find a solution. The temporarily solution is  always  to export the original
sorting, i.e not export the current view after sorting.
 code
 modifier: { order: 'index' },

Example:
                                 extend: 'excel',
                                  exportOptions: {
                                          columns: ':visible',
                                          modifier: { order: 'index' },
                                 },