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を使用しませんでした.これをグリースモンキースクリプトで使用することを計画しており、すべてのページにロードすると速度が低下します（私は思いますか？）. マウスダウンが発生した後にmousemoveをバインドして選択を自動的に変更して動作させましたが、非常に遅くなったので、コピーされたものを変更するという目標に集中するのが最善であると判断しました.

非標準属性の使用について、これが問題になることはありませんか? 論理的に見えたので、人々がそれとデータをコピーせずに代替フォーマットを見ることができるように、タイトルを使用しています。

于 2009-03-20T08:54:28.180 に答える