要素の内容を変更したり、要素内のテキストの一部を選択したり、選択を解除したときに元の状態に戻したりすることは可能ですか？要素を選択したときに要素の内容を変更する方法はありますか？
クリップボードにコピーされたときに代替値がコピーされることが目的です。このような何かを探して
HTML：
<p>Today is the <span class="date" value="18/03/2009">18th of March</span>.</p>
私は次のようである思い付いたソリューションを参照してください。
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);
私はGreasemonkeyのスクリプトでこれを使用すると、すべてのページにそれをロードすることを計画していますように私は意図的にjQueryを使用していない（と思う？）物事を遅くするでしょう。 mousedownを起動した後にmousemoveをバインドして選択を自動的に変更する作業をしていましたが、非常に遅くなってコピーされた内容を変更するという私の目標に集中することが最善であると判断しました。
非標準属性の使用については、これが問題であることはありませんでしたか？私はタイトルを使用しているので、論理的に見えるので、人々はそれをコピーせずに代替フォーマットを見ることができます。
更新：代わりにホバーを使用して（あたりスコット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>
mouseenterとmouseleaveの二重バインドはjqueryのhover（）関数でより簡単に処理されます –
Scottさん、ありがとうございました。私が知ったことは、これがIE上でばかげていることでした。 –
興味深い解決策、私は思いついた私のソリューションを投稿しようとしています。あなたの答えに問題がある場合は、他のテキストで日付を選択してコピーすると、「通常の」日付をコピーすることになります。これは、人々が代替フォーマットを見ることを可能にする良い方法ですが、タイトルはそのためにはより良いかもしれません。 – Annan
選択したことは何ですか？ – SeanDowney
ユーザは、 "Today"の左側にマウスを置いてから、マウスの左ボタンを押し下げて、 "March"の終わりまでマウスをドラッグします。この時点で、それは選択されますが、単語をダブルクリックまたはトリプルクリックするようなものを選択する他の方法があります。 – Annan
なぜコピーしたテキストを変更したいのですか？インターフェースデザインの問題のように聞こえる。 – strager