range.endOffset in Microsoft Edge browser gives wrong valueHow do you disable browser Autocomplete on web form field / input tag?What are valid values for the id attribute in HTML?Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?How to align checkboxes and their labels consistently cross-browsersHow do I give text or an image a transparent background using CSS?Set a default parameter value for a JavaScript functionHow can I get query string values in JavaScript?Sort array of objects by string property valueHow to make a div 100% height of the browser windowCannot display HTML string
How to make your response cachable by browser?
How should we understand "unobscured by flying friends" in this context?
What does the "thaumaturgy hazard trefoil" look like?
How important is the DUP support (at the moment) to the current ruling party in UK?
Procedure for traffic not in sight
Could the government trigger by-elections to regain a majority?
I multiply the source, you (probably) multiply the output!
How accurate is the new appraisal system?
Why are some Mac apps not available on AppStore?
Are there any space probes or landers which regained communication after being lost?
How to progress with CPLEX/Gurobi
What is this grasshopper doing?
Do any aircraft carry boats?
Is there any detail about ambulances in Star Wars?
Tear out when plate making w/ a router
What happens when a caster loses concentration on a banished creature?
Two different colors in an Illustrator stroke / line
How can I protect myself in case of a human attack like the murders of the hikers Jespersen and Ueland in Morocco?
Are programming languages necessary/useful for operations research practitioner?
I see your BIDMAS and raise you a BADMIS
How do I preserve the line ordering for two "equal" strings while sorting and ignoring the case?
Why was "leaping into the river" a valid trial outcome to prove one's innocence?
Job offer without any details but asking me to withdraw other applications - is it normal?
When did computers stop checking memory on boot?
range.endOffset in Microsoft Edge browser gives wrong value
How do you disable browser Autocomplete on web form field / input tag?What are valid values for the id attribute in HTML?Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?How to align checkboxes and their labels consistently cross-browsersHow do I give text or an image a transparent background using CSS?Set a default parameter value for a JavaScript functionHow can I get query string values in JavaScript?Sort array of objects by string property valueHow to make a div 100% height of the browser windowCannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
This is Microsoft Edge browser specific issue.I am trying to attach the CSS style to selected word using Range API's. There is a issue with edge browser when I am trying to expose the functionality range.endOffset . Here I am attaching my code.
<!DOCTYPE html>
<html>
<body>
<p>This is sample content</p>
<p id="demo"></p>
<script>
var range = null;
var selection = window.getSelection();
if( selection && selection.rangeCount > 0 )
range = selection.getRangeAt( 0 );
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
</body>
</html>
Now if I try to select the text "content" form "P " tag, it gives correct value for range.startOffset but gives incorrect value to range.endOffset value. And that will result into messed up the style to whole "P" tag. This issue occurs only in Microsoft Edge browser and if selected text is ending at some html tag like here it is ended with "content" text. If I try to select the text in between of the text then this issue does not occurs. Its working in chrome browser. Is there any workaround to fix this issue in edge browser ?
javascript html range microsoft-edge
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
add a comment |
This is Microsoft Edge browser specific issue.I am trying to attach the CSS style to selected word using Range API's. There is a issue with edge browser when I am trying to expose the functionality range.endOffset . Here I am attaching my code.
<!DOCTYPE html>
<html>
<body>
<p>This is sample content</p>
<p id="demo"></p>
<script>
var range = null;
var selection = window.getSelection();
if( selection && selection.rangeCount > 0 )
range = selection.getRangeAt( 0 );
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
</body>
</html>
Now if I try to select the text "content" form "P " tag, it gives correct value for range.startOffset but gives incorrect value to range.endOffset value. And that will result into messed up the style to whole "P" tag. This issue occurs only in Microsoft Edge browser and if selected text is ending at some html tag like here it is ended with "content" text. If I try to select the text in between of the text then this issue does not occurs. Its working in chrome browser. Is there any workaround to fix this issue in edge browser ?
javascript html range microsoft-edge
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
add a comment |
This is Microsoft Edge browser specific issue.I am trying to attach the CSS style to selected word using Range API's. There is a issue with edge browser when I am trying to expose the functionality range.endOffset . Here I am attaching my code.
<!DOCTYPE html>
<html>
<body>
<p>This is sample content</p>
<p id="demo"></p>
<script>
var range = null;
var selection = window.getSelection();
if( selection && selection.rangeCount > 0 )
range = selection.getRangeAt( 0 );
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
</body>
</html>
Now if I try to select the text "content" form "P " tag, it gives correct value for range.startOffset but gives incorrect value to range.endOffset value. And that will result into messed up the style to whole "P" tag. This issue occurs only in Microsoft Edge browser and if selected text is ending at some html tag like here it is ended with "content" text. If I try to select the text in between of the text then this issue does not occurs. Its working in chrome browser. Is there any workaround to fix this issue in edge browser ?
javascript html range microsoft-edge
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
This is Microsoft Edge browser specific issue.I am trying to attach the CSS style to selected word using Range API's. There is a issue with edge browser when I am trying to expose the functionality range.endOffset . Here I am attaching my code.
<!DOCTYPE html>
<html>
<body>
<p>This is sample content</p>
<p id="demo"></p>
<script>
var range = null;
var selection = window.getSelection();
if( selection && selection.rangeCount > 0 )
range = selection.getRangeAt( 0 );
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
</body>
</html>
Now if I try to select the text "content" form "P " tag, it gives correct value for range.startOffset but gives incorrect value to range.endOffset value. And that will result into messed up the style to whole "P" tag. This issue occurs only in Microsoft Edge browser and if selected text is ending at some html tag like here it is ended with "content" text. If I try to select the text in between of the text then this issue does not occurs. Its working in chrome browser. Is there any workaround to fix this issue in edge browser ?
javascript html range microsoft-edge
javascript html range microsoft-edge
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
edited Mar 28 at 9:43
Avinash Jadhav
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
asked Mar 28 at 7:50
Avinash JadhavAvinash Jadhav
2581 gold badge4 silver badges18 bronze badges
2581 gold badge4 silver badges18 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
What you Edge browser version? I reproduce your problem using the following code on Edge 42 and Edge 44 version.
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
On the Edge 42 Version, if I select the "content", the endOffset will be 1.
on the Edge 44 Version, if I drag to select the "content", the endOffset works well, but if
I select the "content" using the double click method, the endOffset still will be 1.
So, this issue is related to the Edge browser, and I have feedback this issue to Edge Platform.
As a workaround, I suggest you could calculate the endOffset according to the startOffset and the selected text. Try to use the following code:
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = startOffset + selection.toString().length;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset + "<br/>" + selection;
</script>
The screenshot as below:
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55392522%2frange-endoffset-in-microsoft-edge-browser-gives-wrong-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What you Edge browser version? I reproduce your problem using the following code on Edge 42 and Edge 44 version.
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
On the Edge 42 Version, if I select the "content", the endOffset will be 1.
on the Edge 44 Version, if I drag to select the "content", the endOffset works well, but if
I select the "content" using the double click method, the endOffset still will be 1.
So, this issue is related to the Edge browser, and I have feedback this issue to Edge Platform.
As a workaround, I suggest you could calculate the endOffset according to the startOffset and the selected text. Try to use the following code:
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = startOffset + selection.toString().length;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset + "<br/>" + selection;
</script>
The screenshot as below:
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
add a comment |
What you Edge browser version? I reproduce your problem using the following code on Edge 42 and Edge 44 version.
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
On the Edge 42 Version, if I select the "content", the endOffset will be 1.
on the Edge 44 Version, if I drag to select the "content", the endOffset works well, but if
I select the "content" using the double click method, the endOffset still will be 1.
So, this issue is related to the Edge browser, and I have feedback this issue to Edge Platform.
As a workaround, I suggest you could calculate the endOffset according to the startOffset and the selected text. Try to use the following code:
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = startOffset + selection.toString().length;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset + "<br/>" + selection;
</script>
The screenshot as below:
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
add a comment |
What you Edge browser version? I reproduce your problem using the following code on Edge 42 and Edge 44 version.
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
On the Edge 42 Version, if I select the "content", the endOffset will be 1.
on the Edge 44 Version, if I drag to select the "content", the endOffset works well, but if
I select the "content" using the double click method, the endOffset still will be 1.
So, this issue is related to the Edge browser, and I have feedback this issue to Edge Platform.
As a workaround, I suggest you could calculate the endOffset according to the startOffset and the selected text. Try to use the following code:
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = startOffset + selection.toString().length;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset + "<br/>" + selection;
</script>
The screenshot as below:
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
What you Edge browser version? I reproduce your problem using the following code on Edge 42 and Edge 44 version.
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
On the Edge 42 Version, if I select the "content", the endOffset will be 1.
on the Edge 44 Version, if I drag to select the "content", the endOffset works well, but if
I select the "content" using the double click method, the endOffset still will be 1.
So, this issue is related to the Edge browser, and I have feedback this issue to Edge Platform.
As a workaround, I suggest you could calculate the endOffset according to the startOffset and the selected text. Try to use the following code:
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function ()
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0)
range = selection.getRangeAt(0);
var startOffset = range.startOffset;
var endOffset = startOffset + selection.toString().length;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset + "<br/>" + selection;
</script>
The screenshot as below:
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
edited Mar 29 at 2:56
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
answered Mar 29 at 2:39
Zhi Lv - MSFTZhi Lv - MSFT
2,1381 gold badge3 silver badges7 bronze badges
2,1381 gold badge3 silver badges7 bronze badges
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
add a comment |
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
Lv- MSFT This will work but what if the html elements are like nested one . for e.g. <p>This is <span>sample <strong>content</strong></span></p>. Now in above case if I select the word "is sample content" then startoffset will be "6" but endoffset should to be "6" as it should be with respect to "Strong" tag but it is showing "22"
– Avinash Jadhav
Mar 31 at 9:48
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55392522%2frange-endoffset-in-microsoft-edge-browser-gives-wrong-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
