jQuery val 在 Chrome 中无法正常工作

Question

我有一个简单的 jQuery 函数:

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

当单击(鼠标按下)跨度元素时，输入(#family)将获取其字体系列值。 它适用于 FireFox，但在 Chrome 中，它仅适用于仅由一个单词组成的字体系列。 Georgia 可以，但 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(', '));
});

查看example 。必须更改选择列表以遵循一致的值命名方案:

字体名称[, 字体名称]

这在很大程度上依赖于这样一个事实:字体名称不包含任何逗号，无论带引号还是不带引号。