Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    After clicking on selected text, window selection is not giving updated range

    After double click, selection range can be obtained correctly on onclick event but when I again click on the selected text then updated selection range should be returned by window selection but this is not happening. Can anybody tell me if this is a bug in javascript selection or they have made it this way. And what could be the solution to get the updated range apart from timer.

    <div id="xyz" contenteditable="true">Hello world</div>
    <span class="status">Selected text : </span>
    javascript code :

    function yourFunction() {
    if (window.getSelection) {
    var selectionRange = window.getSelection();
    $('.status').text(selectionRange.toString());
    }
    }

    $('#xyz').click(function () {
    $('.status').text('Mouse click');
    yourFunction();
    })

    Example : jsfiddle.net/zRr4s/20

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Mukesh Kumar View Post
    After double click, selection range can be obtained correctly on onclick event but when I again click on the selected text then updated selection range should be returned by window selection but this is not happening. Can anybody tell me if this is a bug in javascript selection or they have made it this way.
    It looks like there are several bugs in Blinkís (Chrome 31ís and Opera 18ís) getSelection method implementation:

    1. Left-clicking within an existing selection results in no selection, but the getSelection method doesn't return an updated, empty selection.
    2. When selecting only the last character of an element, the getSelection method doesn't return an updated selection.
    3. When a selection is created through dragging and it includes the last character of an element, the getSelection method doesn't return an updated selection.

    There's also odd behavior where the selection doesn't update when applying the event listener to a specific element (#xyz in your code) rather than the document, but that's not a bug; clicking outside of the element doesn't call the function, so the selection doesn't get updated when it's erased.

    Your Fiddle doesn't work at all for me in IE11; however, the getSelection method works in my test code. The test code below includes an if statement that works around the first bug in the list above, but I'm not sure how to address the other two bugs.

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; }
    			body { padding: 0 1rem; }
    			h2 { margin: 1rem 0 0.25rem; font-size: 1rem; }
    			p { margin: 0.25rem 0; }
    		</style>
    	</head>
    	<body>
    		<h2>Filler Text</h2>
    		<p id="fillerText">This is filler text.</p>
    		<h2>Selection</h2>
    		<div id="selectionView"></div>
    		<script>
    			var viewport = document.defaultView;
    			function showSelection() {
    				var selection = null;
    				var selectionView = document.getElementById("selectionView");
    				if (typeof viewport.getSelection === "function") {
    					selection = viewport.getSelection();
    					if (selection.toString() !== "" && selection.toString() === selectionView.textContent) {
    						selectionView.textContent = "";
    					}
    					else {
    						selectionView.textContent = selection.toString();
    					}
    				}
    			}
    			document.addEventListener("click", showSelection);
    		</script>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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