編集可能なdivに挿入された文字を識別する方法を知りたい...ユーザーが一重引用符または二重引用符を入力したかどうかを確認し、引用符の後のテキストにこの引用符に特定のクラスを与えます...私はそれがオンキープロパティまたはリターンだと思います...私は知りません...
誰かがヒントを持っていますか?
編集可能なdivに挿入された文字を識別する方法を知りたい...ユーザーが一重引用符または二重引用符を入力したかどうかを確認し、引用符の後のテキストにこの引用符に特定のクラスを与えます...私はそれがオンキープロパティまたはリターンだと思います...私は知りません...
誰かがヒントを持っていますか?
keypress
入力された文字に関する情報を収集できる唯一のイベントであるため、イベントは必要なものです。引用の場合は、キープレスを自分で処理できます。<span>
CSS クラスでを挿入するコードについては、ここでは説明しません。ヘルプが必要な場合は別の質問をするか、DOM Ranges、TextRanges 、およびIEやその他のブラウザーでの選択に関するドキュメントを読むことをお勧めします。
function handleKeypress(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
if (charStr == "'" || charStr == '"') {
// Code to insert quote character followed by <span> with CSS class
// goes here.
// Prevent the default action
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
var div = document.getElementById("your_div");
if (div.addEventListener) {
div.addEventListener("keypress", handleKeypress, false);
} else if (div.attachEvent) {
div.attachEvent("onkeypress", handleKeypress);
}
あなたがやろうとしていることを完全に理解しているかどうかはわかりませんが、ユーザー入力を contentEditable 属性を使用して div にキャプチャしたいようです。MootoolsとFirebugを使用していた場合、次のように開始します::
$('idOfEditableDiv').addEvent('keydown', function(event) {
console.log(event.key);
});
これにより、コンテンツの編集可能な div 内で押されたキーが Firebug コンソールに出力されます。したがって、「a」キーを押すと、「a」が出力されます。これは、Caps Lock キーなどの明らかな値を持たない入力をキャプチャする場合に役立ちます。でイベント全体をログに記録すると、console.log(event)
さらに有用な情報が得られます。
キャプチャするキー (a キーと b キーなど) を特定したら、次の手順を実行します。
$('idOfEditableDiv').addEvent('keydown', function(event) {
if(event.key == 'a' || event.key == 'b') {
//do stuff here if the a or b key was pressed
}
});
a キーが押された場合は何かを実行し、b キーが押された場合は別の操作を実行したい場合があります。その場合は、次のようにします。
$('idOfEditableDiv').addEvent('keydown', function(event) {
if(event.key == 'a') {
//do stuff here if the a key was pressed
}
else if(event.key == 'b') {
//do stuff here if the b key was pressed
}
});
Mootools に慣れていない場合は、次のようにすべての Mootools コードを domReady イベントでラップする必要があります。
window.addEvent('domready', function() {
$('idOfEditableDiv').addEvent('keydown', function(event) {
if(event.key == 'a') {
//do stuff here if the a key was pressed
}
else if(event.key == 'b') {
//do stuff here if the b key was pressed
}
});
});