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

No comments:

Post a Comment