[英]how to show a div below selected text in textarea?
I have a scenario,where I need to show a div(like popup) on-select of text in text-area.But, I used mouse-down for it,the position of div is not exactly below the text sometimes. 我有一个场景,我需要在文本区域中显示一个div(如弹出窗口)选择文本。但是,我使用鼠标向下,div的位置有时不完全低于文本。
JavaScript: JavaScript的:
function getSel() {
// obtain the object reference for the textarea>
var txtarea = document.getElementById("mytextarea");
// obtain the index of the first selected character
var start = txtarea.selectionStart;
// obtain the index of the last selected character
var finish = txtarea.selectionEnd;
//obtain all Text
var allText = txtarea.value;
// obtain the selected text
var sel = allText.substring(start, finish);
sel = sel.replace(/[\S]/g, "*");
//append te text;
var newText = allText.substring(0, start) + sel + allText.substring(finish, allText.length);
txtarea.value = newText;
$('#newpost').offset({ top: 0, left: 0 }).hide();
}
$(document).ready(function () {
var position;
$('#newpost').hide();
$('#mytextarea').on('select', function (e) {
var str = $('#mytextarea').val();
$('#newpost').offset(position).show();
var txtarea = document.getElementById("mytextarea");
var start = txtarea.selectionStart;
var finish = txtarea.selectionEnd;
$('#newpost div').text('Replace with stars');
}).on('select', function (e) {
position = { top: e.pageY+10, left: e.pageX };
});
$('#newpost').hide();
});
function closePopUp() {
$('#newpost').hide();
}
Here is my plunker link 这是我的plunker链接
Here my requirement is to show a div on-select of text.But when I am using on-select instead of mouse-down,the div is showing below text-area. 这里我的要求是显示文本的div选择。但是当我使用on-select而不是mouse-down时,div显示在text-area下面。
Thanks in Advance. 提前致谢。
A few days ago in this answer I suggested an approach of finding the cursor position and displaying a div
over the textarea
when the user selects some text. 几天前,在这个答案中,我提出了一种方法,即当用户选择一些文本时,找到光标位置并在
textarea
上显示div
。
This approach works, however, as @anub has mentioned, div
is sometimes displayed not right under the selected text, but a couple of pixels up or down - because it's position is determined based on the first user's click. 然而,这种方法有效,正如@anub所提到的,
div
有时显示在所选文本的正下方,但是上下两个像素 - 因为它的位置是根据第一个用户的点击确定的。
After a short search I found this post that describes how to find the position of the selected text in the textarea by creating a temporary div
clone of the given textarea. 经过短暂的搜索,我发现这篇文章描述了如何通过创建给定textarea的临时
div
克隆来找到textarea中所选文本的位置。
I've adopted the getCursorXY
method from there and used it to position the popup. 我从那里采用了
getCursorXY
方法并用它来定位弹出窗口。
Give it a try! 试试看!
function getSel() { // obtain the object reference for the textarea> var txtarea = document.getElementById("mytextarea"); // obtain the index of the first selected character var start = txtarea.selectionStart; // obtain the index of the last selected character var finish = txtarea.selectionEnd; //obtain all Text var allText = txtarea.value; // obtain the selected text var sel = Array(finish - start + 1).join("*"); //append te text; var newText = allText.substring(0, start) + sel + allText.substring(finish, allText.length); txtarea.value = newText; $('#newpost').offset({top: 0, left: 0}).hide(); } function closePopUp() { $('#newpost').offset({top: 0, left: 0}).hide(); } $(document).ready(function () { closePopUp(); var newpost = $('#newpost'); $('#mytextarea').on('select', function (e) { var txtarea = document.getElementById("mytextarea"); var start = txtarea.selectionStart; var finish = txtarea.selectionEnd; newpost.offset(getCursorXY(txtarea, start, 20)).show(); newpost.find('div').text(Array(finish - start + 1).join("*")); }); }); const getCursorXY = (input, selectionPoint, offset) => { const { offsetLeft: inputX, offsetTop: inputY, } = input // create a dummy element that will be a clone of our input const div = document.createElement('div') // get the computed style of the input and clone it onto the dummy element const copyStyle = getComputedStyle(input) for (const prop of copyStyle) { div.style[prop] = copyStyle[prop] } // we need a character that will replace whitespace when filling our dummy element // if it's a single line <input/> const swap = '.' const inputValue = input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value // set the div content to that of the textarea up until selection const textContent = inputValue.substr(0, selectionPoint) // set the text content of the dummy element div div.textContent = textContent if (input.tagName === 'TEXTAREA') div.style.height = 'auto' // if a single line input then the div needs to be single line and not break out like a text area if (input.tagName === 'INPUT') div.style.width = 'auto' // create a marker element to obtain caret position const span = document.createElement('span') // give the span the textContent of remaining content so that the recreated dummy element // is as close as possible span.textContent = inputValue.substr(selectionPoint) || '.' // append the span marker to the div div.appendChild(span) // append the dummy element to the body document.body.appendChild(div) // get the marker position, this is the caret position top and left relative to the input const { offsetLeft: spanX, offsetTop: spanY } = span // lastly, remove that dummy element // NOTE:: can comment this out for debugging purposes if you want to see where that span is rendered document.body.removeChild(div) // return an object with the x and y of the caret. account for input positioning // so that you don't need to wrap the input return { left: inputX + spanX, top: inputY + spanY + offset, } }
#mytextarea {width: 600px; height: 200px; overflow:hidden; position:fixed} #newpost { position:absolute; background-color:#ffffdc; border:1px solid #DCDCDC; border-radius:10px; padding-right:5px; width: auto; height: 30px; } #newpost span { cursor:pointer; position: absolute; top: 0; right: 5px; font-size: 22px; } #newpost div { color:#0000ff; padding:10px; margin-right:10px; width: auto; cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> </head> <body> <textArea id="mytextarea"></textArea> <div id="newpost"> <span onclick="closePopUp();">˟</span> <div onclick="getSel()"></div> </div> </body> </html>
I have encountered that problem while close the popup and reselecting another region, I resolved that by 我在关闭弹出窗口并重新选择另一个区域时遇到了这个问题,我解决了这个问题
function closePopUp() {
$('#newpost').offset({ top: 0, left: 0 }).hide();
}
check this out 看一下这个
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.