Есть ли способ изменить содержимое элементов при их выделении? - PullRequest
Новая
       14

Есть ли способ изменить содержимое элементов при их выделении?

0 голосов
/ 19 марта 2009

Можно ли изменить содержимое элементов, когда они или часть текста внутри них выделены, а затем вернуть их обратно, когда они отменены?

Цель состоит в том, чтобы при копировании в буфер обмена копировалось альтернативное значение.

HTML выглядит примерно так: 

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

Ответы [ 2 ]

1 голос
/ 20 марта 2009

ОБНОВЛЕНО: вместо этого используется указатель мыши (за комментарий Скотта Э.)

Мне нравится JQUERY, и ниже приведен способ, хотя и не идеальный, но он должен помочь вам начать свой путь. Причина, по которой он не идеален, заключается в том, что возникает «трепетание», если вы наводите курсор мыши и вправо (интересно) от пролета.

Обратите внимание, что это полностью функционально, но вы должны получить локальную версию JQUERY js. Также, после публикации этого сообщения я обнаружил, что ввод-вывод не работает должным образом.

См. 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>
0 голосов
/ 20 марта 2009

Я пришел к следующему решению:

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, но в итоге он работал очень медленно, поэтому я решил, что лучше всего сосредоточиться на своей цели - изменить то, что было скопировано.

Насчет использования нестандартных атрибутов, я никогда не находил, что это проблема? Я использую заголовок, чтобы люди могли видеть альтернативный формат без копирования и данных, потому что это казалось логичным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...