Question

使用jQuery，如何在编辑文本框时启用smart quotes的实时插入？

Answer 1

一种选择是使用鲜为人知的'q'元素。

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

然后用户代理将尽力创建最佳样式报价。

Answer 2

假设你正在谈论尝试自动用智能引号替换“和”：它不一定是个好主意。为报价选择正确方法的算法是脆弱的，很容易被愚弄。有一个共同点查看引用之前的字符的公式，这是由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'));

Answer 3

以Kent的答案为基础：你可以使用q标签，但是，大多数浏览器默认只使用直引号，IE不显示任何引号。

使用CSS可以在IE7 +和其他浏览器中解决这个问题。这是我在样式表中添加的内容：

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

第一批用于卷曲双引号，第二批用于卷曲单引号（用于嵌套q标签时）。

这在IE6中不起作用。我的正常解决方案是在q元素上设置颜色，这样它们就能脱颖而出。 IE6的一部分“f * ck it，这就足够了”。

使用JQuery的智能引号

3 个答案: