如何使用javascript中的Range对象检查选择的节点? [英] How can I check the node of the selection using Range object in javascript?

查看:28
本文介绍了如何使用javascript中的Range对象检查选择的节点?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想退出选择并检查选择的节点.我正在尝试以下代码.但我认为,我无法指向选择,因此代码失败.

<script type="text/javascript">函数选择AnchorNode(){if (window.getSelection) {//Firefox、Opera、Google Chrome 和 Safarivar selection = window.getSelection();如果(选择.anchorNode){var rangeToSelect = document.createRange();警报(选择.anchorNode.nodeName);} 别的 {alert("您的浏览器不支持此示例!");}}<身体><button onclick="SelectAnchorNode();">点击查看!</button><br/><br/><div><div>这是第一行.</div><p>这是第二行.</p>

解决方案

您的代码中有一些错误,您缺少一个}"来关闭函数.

这也不会返回 true,因为选择是在按钮上而不是在锚点(链接)上进行的

试试这个代码(我知道这不是你想要的,但它可以让你的例子工作)

<头><script type="text/javascript">函数选择AnchorNode(){if (window.getSelection) {//Firefox、Opera、Google Chrome 和 Safarivar selection = window.getSelection();如果(选择.anchorNode){var rangeToSelect = document.createRange();警报(选择.anchorNode.nodeName);} 别的 {alert("您的浏览器不支持此示例!");}}}<身体><a onclick="SelectAnchorNode();">点击查看!</a><br/><br/><div><div>这是第一行.</div><p>这是第二行.</p>

如你所见,我用a"替换了button",并添加了一个缺失的}"

编辑!
试试这一行,(我现在假设您想要获得用户所做的选择,并且您不想使用 javascript 创建选择?)

alert(selection.anchorNode.parentNode.nodeName);

根据您开始选择的位置,您将获得不同的结果,您还需要首先检查是否选择了文本节点(因为我可以直接在正文中进行选择).但我希望这能让您更接近您的解决方案.

问候
托比亚斯

I want to retireve the selection and check the node of the selection. I'm trying following code. But I think, I'm not able to point to the selection and so the code fails.

<head>
<script type="text/javascript">
    function SelectAnchorNode () {
        if (window.getSelection) {        // Firefox, Opera, Google Chrome and Safari
            var selection = window.getSelection ();
            if (selection.anchorNode) {
                var rangeToSelect = document.createRange ();
                alert(selection.anchorNode.nodeName);

        } else {
            alert ("Your browser does not support this example!");
        }
    }
</script>
</head>
<body>
    <button onclick="SelectAnchorNode ();">Click to check!</button>
    <br /><br />
    <div>
        <div>This is the first line.</div>
        <p>This is the second line.</p>
    </div>
</body>

解决方案

You have some errors in your code, your missing a "}" to close the function.

Also this wont return true since the selection is made on a button and not on an anchor (link)

Try this code (I understand if this isn't what you want, but it makes your example work)

<html>
<head>
<script type="text/javascript">
    function SelectAnchorNode () {
        if (window.getSelection) {        // Firefox, Opera, Google Chrome and Safari
            var selection = window.getSelection();
            if (selection.anchorNode) {
                var rangeToSelect = document.createRange();
                alert(selection.anchorNode.nodeName);
            } else {
                alert ("Your browser does not support this example!");
            }
        }
    }
</script>
</head>
<body>
<a onclick="SelectAnchorNode();">Click to check!</a>
<br /><br />
<div>
    <div>This is the first line.</div>
    <p>This is the second line.</p>
</div>

As you can see I replaced "button" with "a", and added a missing "}"

EDIT!
Try this line instead, (I have now assumed that you want to get the selection made by the user, and that you don't want to create a selection with javascript?)

alert(selection.anchorNode.parentNode.nodeName);

Depending on where you start your selection you will get different results, you also need to first check if there was a text node selected or not (since I could make a selection directly in body). But I hope this brings you closer to your solution.

Regards
Tobias

这篇关于如何使用javascript中的Range对象检查选择的节点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆