0

是否可以在选择元素或其中的部分文本时更改元素的内容，然后在取消选择它们时将它们恢复回来？

目的是当它们被复制到剪贴板时，替代值被复制。

html 看起来像这样：

<p>Today is the <span class="date" value="18/03/2009">18th of March</span>.</p>
4

2 回答 2

1

更新：改为使用悬停（根据 Scott E. 评论）

我喜欢 JQUERY，下面是一种方法，虽然不完美，但应该让你开始走上这条路。它不完美的原因是因为如果您将鼠标悬停在跨度的右侧（有趣地），则会出现“颤动”。

请注意，这是功能齐全的，但您应该获得 JQUERY js 的本地版本。此外，在第一次发布后，我发现 I/E 的行为与预期不符。

请参阅http://docs.jquery.com/Events和http://docs.jquery.com/Core

<html>
  <body>
    <p>Today is the <span class="date"/></p>
  </body>
</html>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

  $(document).ready(function(){

    // use data object of <span> element with class 'date'.
    // Do this instead of using "value" attribute in <span>
    // which is not normal part of <span> element
    // instead of putting the value directly in <span> above, I'm assigning it here

    $(".date").data("mydates", { selected : "18/03/2009", normal: "18th of March" } );

    // assign the normal value on startup
    $(".date").html($(".date").data("mydates").normal);

    // first function is executed on mouseover
    // second function is executed on mouseout
    $(".date").hover(
        function() {
            $(".date").html($(".date").data("mydates").selected);
        },
        function() {
            $(".date").html($(".date").data("mydates").normal);
        }
    );

  });
</script>
于 2009-03-20T04:47:01.723 回答
0

我想出的解决方案如下。

HTML：

<p>Semper mi vitae tellus <span class="date" title="19/03/09" data="19th of March">19th of March</span> quis, augue.</p>

CSS：

.date {
    display:inline-block;
    text-align:center;
}

当内容被替换时，这会阻止文本跳来跳去。

Javascript：

var travel = function(node, noChildren){
    if (node.firstChild && !noChildren) {
        return node.firstChild;
    }
    if (node.nextSibling) {
        return node.nextSibling;
    }
    return travel(node.parentNode, true);
};

var onMouseDown = function(event){
    var spans = document.getElementsByClassName(revertClass);
    var i = spans.length;
    while (i) {
        i--;
        spans[i].innerHTML = spans[i].getAttribute('data');
        spans[i].className = window.baseClass;
    }

    var selection = window.getSelection();
    if (selection.rangeCount && event.button === 2){
        var n = selection.rangeCount;
        var k = n;
        do {
            var i = k-n;
            var range = selection.getRangeAt(i);

            var element = range.startContainer;
            var endContainer = range.endContainer;
            do {
                if (element.className === window.baseClass){
                    element.style.width = element.offsetWidth;
                    element.innerHTML = element.title;
                    element.className += ' ' + window.revertClass;
                }
                if (element == endContainer){
                    break;
                }
            }
            while (element = travel(element));

            var newRange = document.createRange();
            newRange.setStart(range.startContainer, range.startOffset);
            newRange.setEnd(range.endContainer, range.endOffset);

            selection.removeRange(range);
            selection.addRange(newRange);
        }
        while (--n);
    }
};

var onKeyDown = function(event){
    //Ctrl + C
    if (event.keyCode === 67 && event.ctrlKey){
        event.button = 2;
        onMouseDown(event);
    }
    //Tab to deselect
    else if (event.keyCode === 9){
        onMouseDown(event);
    }
};

window.baseClass = 'date';
window.revertClass = 'date_revert';
window.addEventListener ('mousedown', onMouseDown, false);
window.addEventListener ('keydown', onKeyDown, false);

我故意不使用 jquery，因为我计划在greasemonkey 脚本中使用它并将它加载到每个页面上会减慢速度（我认为？）。我让它通过在 mousedown 触发后绑定 mousemove 来自动更改选择，但它最终变得非常慢，所以我决定最好专注于更改复制内容的目标。

关于非标准属性的使用，我从来没有发现这是一个问题？我正在使用标题，以便人们可以在不复制它和数据的情况下看到替代格式，因为它看起来很合乎逻辑。

于 2009-03-20T08:54:28.180 回答