Results 1 to 2 of 2

Thread: IE 6-8 fix for this function

  1. #1
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default IE 6-8 fix for this function

    I am working on a small function and it works fine in all browsers, however, in IE6 thru 8 the tags act funny. For instance if you click on Bold you will have <b></b>, then if you click on Bold the second time, instead of having another <b></b> you'll have <b></b><b><b></b></b><b></b>. Has something to do with range / length.

    Fiddle: http://jsfiddle.net/T2Q89/26/

    Code:
    Code:
    $(document).ready(function() {
    	$('#btnedit-bold').on("click",function(e) {
    		wrapText('b');
    	});
    
    	$('#btnedit-italic').on("click",function(e) {
    		wrapText('i');
    	});
    
    	$('#btnedit-underline').on("click",function(e) {
    		wrapText('u');
    	});
    
    	$('#btnedit-delete').on("click",function(e) {
    		wrapText('del');
    	});
    
    	$('#btnedit-link').on("click",function(e) {
    		var textArea = $('.area'),
    			len = textArea.val().length,
    			start = textArea[0].selectionStart,
    			end = textArea[0].selectionEnd,
    			selectedText = textArea.val().substring(start, end);
    		$('#btnedit-title').val(selectedText);
    		$('#btnedit-url').val('http://');
    		$('#prompt').show();
    	});
    
    	$('#btnedit-ok').on("click",function(e) {
    		e.preventDefault();
    		$('#prompt').hide();
    	    replacement = '<a title="'+$('#btnedit-title').val()+'" href="'+$('#btnedit-url').val()+'" rel="external">' + $('#btnedit-title').val() + '</a>';
            wrapLink(replacement);
    	}); 
    
    	$('#btnedit-cancel').on("click",function(e) {
    		e.preventDefault();
    		$('#prompt').hide();
    	}); 
    });
    
    function wrapLink(link) {
    	var textArea = $('.area'),
    		len = textArea.val().length,
    		start = textArea[0].selectionStart,
    		end = textArea[0].selectionEnd,
    		selectedText = textArea.val().substring(start, end);
    	textArea.val(textArea.val().substring(0, start) + link + textArea.val().substring(end, len));
    	$('.area').keyup();
    }
    
    
    function wrapText(tag) {
    	var textArea = $('.area'),
    		len = textArea.val().length,
    		start = textArea[0].selectionStart,
    		end = textArea[0].selectionEnd,
    		selectedText = textArea.val().substring(start, end),
    		replacement = '<' + tag + '>' + selectedText + '</' + tag + '>';
    	textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
    	$('.area').keyup();
    }
    
    $(function() {	
    	$('.area').keyup(function(){					
    		var value = $(this).val();
    		var contentAttr = $(this).attr( 'name' );
    		$( '.' + contentAttr + '' ).html(value);
    	})
    });
    **** By the way I do realize jsfiddle doesn't work in those browsers, but I am able to test that script on my site and that's how I know it's doing that weird thing in IE6-8.


    **** In javascript the IE6-8 fix would look something like:

    Code:
    var element = document.getElementByClassName( 'area' );
    if( document.selection ){
    var range = document.selection.createRange();
    var stored_range = range.duplicate();
    stored_range.moveToElementText( element );
    stored_range.setEndPoint( 'EndToEnd', range );
    element.selectionStart = stored_range.text.length - range.text.length;
    element.selectionEnd = element.selectionStart + range.text.length;
    }
    Now how do I implement something similar in that particular jquery code?
    Last edited by qwikad.com; 10-15-2015 at 01:30 AM.

  2. #2
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    I am close to figuring this out. This took care of the issue, but it now places the cursor in front of a new set of tags (ie <b></b>). I need it to be placed between the tags. What needs to be done? I tried a couple things nothing worked.

    Code:
      var textArea = $('.area').get(0);
        var len = textArea.value.length;
        textArea.selectionStart = len;
        textArea.selectionEnd = len;
        textArea.focus();
    Last edited by qwikad.com; 10-15-2015 at 04:12 AM.

Similar Threads

  1. Adding javascript function within ontoggle function
    By piers in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-22-2009, 02:41 AM
  2. Replies: 9
    Last Post: 09-16-2008, 05:31 PM
  3. Replies: 2
    Last Post: 08-02-2007, 06:19 AM
  4. out side of function or inside of function
    By riptide in forum JavaScript
    Replies: 2
    Last Post: 07-12-2007, 04:10 PM
  5. Passing Variables Function to Function
    By jscheuer1 in forum JavaScript
    Replies: 3
    Last Post: 03-26-2005, 12:22 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •