Question

是否可以在选择元素或其中的部分文本时更改元素的内容，然后在取消选择时将其还原为？

目标是将它们复制到剪贴板时复制备用值。

html看起来像这样：

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

Answer 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>

Answer 2

我想出的解决方案如下。

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脚本中使用它，并且在每个页面加载它会减慢速度（我认为？）。我有它使用它自动改变选择通过绑定mousemove在mousedown射击后但它最终非常慢所以我决定最好专注于我改变复制的目标。

关于非标准属性的使用，我从未发现这是一个问题？我正在使用标题，以便人们可以看到替代格式而无需复制它和数据，因为它似乎是合乎逻辑的。

有没有办法在选择元素时更改元素的内容？

2 个答案: