نص محدد وإحداثيات xy
-
29-09-2019 - |
سؤال
كيفية الحصول على نص محدد وإحداثيات xy للكلمة في نفس الوقت ؟؟
المحلول
فقط googled ذلك:
var txt = "";
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
// FireFox
txt = document.getSelection();
} else if (document.selection) {
// IE 6/7
txt = document.selection.createRange().text;
}
txt = txt.toString()
لا توجد طريقة بسيطة للحصول على إحداثيات X/Y للنص المحدد. لأنه يعتمد على موضع الحاوية وحجمه وخط النص وتخطيط النص والعديد من المتغيرات الأخرى.
نصائح أخرى
للتوسع على إجابة @Matuduke ، يمكنك الحصول على موضع النص المحدد مثل SO:
var txt = window.getSelection(),
range = txt.getRangeAt(0),
boundary = range.getBoundingClientRect();
// Available positions:
// boundary.top
// boundary.bottom
// boundary.left
// boundary.right
هذه سوف تعطيك قيم البكسل بالنسبة إلى منفذ العرض. ومع ذلك ، لا يبدو أنه يعمل في مجالات النص ، وهي مشكلة أحاول حاليًا حلها.
أنا أستخدم هذا البرنامج المساعد jQuery http://plugins.jquery.com/node/7411 لمشروع ويبدو أنه يعمل بلا عيب. يمكنك استخدام jQuery للحصول على موقع الماوس http://docs.jquery.com/tutorials:mouse_position
فيما يلي بعض رمز العينة الذي عملت عليه
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textselect.js"></script>
<script type="text/javascript">
$(function(){
$('#select').bind('textselect click', function(e){
console.log(e.text);
console.log(e.pageX);
})
});
</script>
<!-- Date: 2010-11-05 -->
</head>
<body>
<div id="select">
This is a simple select test
</div>
</body>
</html>
يمكنك تجربة شيء مثل هذا
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textselect.js"></script>
<script type="text/javascript">
$(function(){
$('#select').bind('textselect click', function(e){
console.log(e.text);
console.log(e.pageX);
var selected_text = e.text
var original_text = $(this).text();
var parts = original_text.replace(e.text, "/").split("/");
for(i in parts) {
console.log(parts[i])
}
})
});
</script>
<!-- Date: 2010-11-05 -->
</head>
<body>
<div id="select">
This is a simple select test
</div>
</body>
</html>
لا تنتمي إلى StackOverflow