jQuery val在Chrome中无法正常工作

Question

我有一个简单的jQuery函数:

$('#selectable1 span').live('mousedown', function() {
        var ff = $(this).css("font-family");
        $("#family").val(ff);
});

单击span元素(mousedown)时,输入(#family)将获取其字体系列值.它适用于FireFox,但在Chrome中,它仅适用于仅由一个单词组成的字体系列.格鲁吉亚将工作,但Times New Roman不会.

你可以在这里看到代码:

http://jsfiddle.net/aLaGa/

或者住在http://www.typefolly.com

这有什么问题？感谢名单

Answer 1

Chrome使用单引号包装多个单词的字体系列.因此,Chrome中返回的font-family 'Times New Roman'的值为:与选择列表中的值不匹配Times New Roman.

考虑到所有这些浏览器变体,我认为最好的解决方案是用逗号分隔姓氏,修剪每个字体名称周围的单引号(如果有的话),然后再加入它们.在选择列表中使用此已清理的值.

$('#selectable1 span').live('mousedown', function() {
    var fontFamily = $(this).css('font-family');

    var fonts = fontFamily.split(',');
    var sanitizedFonts = $.map(fonts, function(name) {
        // trim single quotes around font name (if any) for Chrome/Safari
        // trim double quotes around font name (if any) for Firefox
        return name.trim().replace(/^['"]|['"]$/g, '');
    });

    $('#family').val(sanitizedFonts.join(', '));
});

看一个例子.必须更改选择列表以遵循以下值的一致命名方案:

fontName[, fontName]

这很大程度上依赖于字体名称不包含任何逗号,引用或不引用的事实.

Answer 2

您可以稍微更改脚本以替换 WebKit 在字体名称包含空格时添加的引号，如下所示：

\n\n

$(\'#selectable1 span\').live(\'mousedown\', function() {\n  var ff = $(this).css("font-family").replace(/\\\'/g,"");\n  $("#family").val(ff);\n});    \xe2\x80\x8b\n

\n\n

您可以在此处查看工作演示:)

\n\n

这里的正则表达式方法从中提取文字值style可能比任何事情都容易，但我不是正则表达式专家，有人可以随意改进它并更新答案（我对正则表达式很烂，抱歉！ ）这适用于您拥有的所有示例。

\n