JavaScript :: كيفية تحديد ما تم إدخال الحرف (أو السلسلة) على Div قابل للتحرير؟

Question

أريد أن أعرف كيفية تحديد ما تم إدخال الحرف على قابلة للتحرير ... أريد أن أرى ما إذا كان المستخدم يكتب علامة اقتباس واحدة أو مزدوجة ، وإعطاء فئة محددة لهذا الاقتباس إلى النص بعد الاقتباس ... أعتقد أن هذا خاصية onkey أو عودة ... لا أعرف ...

أي شخص لديه نصيحة؟

Answer 1

ال keypress الحدث هو ما تريده ، لأن هذا هو الحدث الوحيد الذي يمكنك من خلاله جمع معلومات حول الشخصية المكتوبة. يمكنك التعامل مع المفاتيح بنفسك في حالة الاقتباس. الرمز لإدراج أ <span> مع فئة CSS لا يتم تغطيتها هنا. أود أن أقترح طرح سؤال آخر إذا كنت بحاجة إلى مساعدة ، أو ربما قراءة بعض الوثائق على نطاقات دوم, 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);
}

Answer 2

لست متأكدًا من أنني أفهم تمامًا ما تحاول القيام به ، لكن يبدو أنك ترغب في الحصول على مدخلات المستخدم في Div مع السمة القابلة للاسترداد. لو كنت أستخدم موتول و Firebug سأبدأ بما يلي ::

$('idOfEditableDiv').addEvent('keydown', function(event) {
    console.log(event.key);
    });

سيطبع ذلك في وحدة التحكم في Firebug أي مفتاح يتم الضغط عليه داخل المحتوى القابل للتحرير. لذلك إذا ضغطت على "A" المفتاح "، فسيتم طباعة". قد يكون هذا مفيدًا إذا كنت تتطلع إلى التقاط الإدخال والتي لا تحتوي على قيمة واضحة مثل مفتاح قفل CAPS. تسجيل الحدث بأكمله مع 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
        }
    });

في بعض الأحيان قد ترغب في القيام بأشياء إذا تم الضغط على المفتاح وأشياء أخرى إذا تم الضغط على مفتاح 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
            }
        });
    });

مزيد من المعلومات حول أحداث Mootools