Умные цитаты с использованием JQuery - PullRequest
Новая
       19

Умные цитаты с использованием JQuery

1 голос
/ 18 января 2009

Используя jQuery, как я могу включить вставку в реальном времени интеллектуальных кавычек при редактировании текстовых полей?

Ответы [ 3 ]

8 голосов
/ 18 января 2009

Одним из вариантов является использование малоизвестного элемента 'q'. 

foo bar<q>quoted area</q>foo bar

тогда пользовательский агент приложит все усилия, чтобы создать лучшие цитаты стиля.

5 голосов
/ 18 января 2009

Основываясь на ответе Кента: вы можете использовать теги q, однако большинство браузеров по умолчанию используют только прямые кавычки, а IE не отображает никаких кавычек.

Это исправлено в IE7 + и других браузерах с помощью CSS. Вот что я положил в свои таблицы стилей: 

q:before {
    content: "\201c";
}
q:after {
    content: "\201d";
}
q q:before {
    content: "\2018";
}
q q:after {
    content: "\2019";
}

Первая партия предназначена для фигурных двойных кавычек, вторая - для фигурных одинарных кавычек (если у вас есть вложенные теги q).

Это не работает в IE6. Мое обычное решение - установить цвет на элементы q, чтобы они выделялись. Часть моей стратегии "черт побери, это достаточно хорошо" для IE6.

5 голосов
/ 18 января 2009

Предполагается, что вы говорите о попытке заменить "и" на умные кавычки автоматически: это не обязательно хорошая идея. Алгоритмы выбора правильного способа обращения к кавычкам хрупки и их легко обмануть. формула, связанная с просмотром символа перед кавычкой, который используется такими программами, как Office. Но они часто допускают ошибки, оставляя текст хуже, чем если бы он не пробовал. Иногда, конечно, вы не хотите умные цитаты вообще (особенно на таком сайте, где мы говорим код).

Если вам удобнее набирать текст, попробуйте установить раскладку клавиатуры, которая позволяет вводить умные кавычки прямо и явно.

Тем не менее, если хотите, вот код для начала ... 

<textarea id="foo" rows="6" cols="40"></textarea>

... 

function AutoReplacer(element) {
    // List of replacement rules. Note currently with this simplistic code
    // replacements should be the same length as the original text.
    //
    replacements= [
        [' "', ' \u201C'],
        ['("', ' \u201C'],
        ['"', '\u201D']
    ];

    // Only attempt to use replacer behaviour if we can retain the cursor
    // position. Setting value by default moves the cursor to the end of the
    // input, which is too irritating.
    //
    if (getInputSelection(element)!==null) {
        element.onkeyup= function() {
            value= element.value;
            for (var i= 0; i<replacements.length; i++) {
                value= value.split(replacements[i][0]).join(replacements[i][1]);
            }
            if (value!=element.value) {
                var s= getInputSelection(element);
                element.value= value;
                setInputSelection(element, s);
            }
        };
    }
}

// Cross-browser (as much as possible anyway) cursor positioning
//
function getInputSelection(element) {
    if (element.selectionStart!==window.undefined) {
        return [element.selectionStart, element.selectionEnd];
    } else if (document.selection) {
        var BIG= 1000000;
        var range= document.selection.createRange();
        if (range.moveStart===window.undefined)
            return [0, 0];
        var start= -range.moveStart('character', -BIG);
        var end= -range.moveEnd('character', -BIG);
        return [start-1, end-1];
    } else return null;
}
function setInputSelection(element, s) {
    if (element.selectionStart!==window.undefined) {
        element.selectionStart= s[0];
        element.selectionEnd= s[1];
    } else if (document.selection) {
        var range= element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', s[1]);
        range.moveStart('character', s[0]);
        range.select();
    }
}

new AutoReplacer(document.getElementById('foo'));
...