right click inside a textarea gives entire line - regarding the current cursor position
I need the same with an editable div - but it doesn't work
console is empty i.e. an empty string is there
pls help
$(document).on('contextmenu', '#txstory', function(e){
e.preventDefault();
var borderChars = ['\n', '\r', '\t'];
var tex = $(this).val();
var start = $(this)[0].selectionStart;
var end = $(this)[0].selectionEnd;
while (start > 0){
if(borderChars.indexOf(tex[start]) == -1){--start;}
else{break;}
}
while(end < tex.length){
if(borderChars.indexOf(tex[end]) == -1){ end;}
else{break;}
}
var str = tex.substr(start, end - start).trim();
console.log(str);
});
$(document).on('contextmenu', '#ed', function(e){
e.preventDefault();
var borderChars = ['\n', '\r', '\t'];
var tex = $(this).text();
var start = $(this)[0].selectionStart;
var end = $(this)[0].selectionEnd;
while (start > 0){
if(borderChars.indexOf(tex[start]) == -1){--start;}
else{break;}
}
while(end < tex.length){
if(borderChars.indexOf(tex[end]) == -1){ end;}
else{break;}
}
var str = tex.substr(start, end - start).trim();
console.log(str);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='btx' id='txstory'>lorem ipsum</textarea>
<div class='ed' id='ed' contenteditable>dolor sit</div>CodePudding user response：
Get the user's selection's baseOffset, then loop through each line and check whether the offset is within the range of the index of the start of the line and index of the end of the line:
$(document).on('contextmenu', '#txstory', function(e){
e.preventDefault();
var borderChars = ['\n', '\r', '\t'];
var tex = $(this).val();
var start = $(this)[0].selectionStart;
var end = $(this)[0].selectionEnd;
while (start > 0){
if(borderChars.indexOf(tex[start]) == -1){--start;}
else{break;}
}
while(end < tex.length){
if(borderChars.indexOf(tex[end]) == -1){ end;}
else{break;}
}
var str = tex.substr(start, end - start).trim();
console.log(str);
});
$(document).on('contextmenu', '#ed', function(e){
var pos = document.getSelection().baseOffset;
var lines = e.target.textContent.split("\n")
var line;
var characs = 0;
for(let i = 0; i < lines.length; i ){
if(characs <= pos && characs lines[i].length >= pos){
line = lines[i];
break;
}
characs = lines[i].length
}
console.log(line)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='btx' id='txstory'>lorem ipsum</textarea>
<div class='ed' id='ed' contenteditable>dolor sit</div>