使用JQuery的智能引号

Question

使用jQuery,如何在编辑文本框时启用智能引号的实时插入？

Answer 1

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

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

然后,用户代理将尽最大努力创建最佳样式报价.

• 关于列表的文章
• W3Schools的

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

建立肯特的答案:你可以使用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,这就足够了"的策略.