jQuery val在Chrome中工作不正常

我有一个简单的jQuery函数：

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

单击跨度元素（鼠标向下）时，输入（#族）将获取其字体族值。 它适用于FireFox，但在Chrome中，它只适用于由一个单词组成的字体系列。佐治亚州将起作用，但《泰晤士报新罗马报》不会

您可以在此处看到代码：

或者住在

这有什么问题？

---

Thanx

字体系列提供逗号分隔值的列表，而不是正在使用的字体。它还可以在引号中给出值。在示例页面上，添加行

alert（ff）

将给出：

“新罗马时代”

Georgia

---

adage-script-1、adage-script-2

Chrome将包含多个单词和单引号的字体系列包装起来。因此，Chrome中返回的字体系列值为：

“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]

---

这在很大程度上取决于这样一个事实，即字体名称将不包含任何逗号（引号或未引号）。

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

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

：）

---

，但我不是正则表达式大师，有人可以随意改进并更新答案（对不起，我对正则表达式很差劲！）这适用于所有示例。

hmmm，所以我必须去掉comas+1的返回值，在编辑标记和纠正错误后，我正要发布这篇文章。值得注意的是，Chrome在逗号分隔的字体系列中也会在逗号后插入空格，这就是为什么单击“格言”也不起作用的原因。这也是一个很好的解决方案。引号中是否有包含

，

的字体名称？如果是这样的话，你就有一个小问题要解决。名字可以在引号之外，只要它们被转义<代码>字体系列：“我的，很棒的字体”和

字体系列：我的\，很棒的\font

都是合法的。当通过DOM访问时，Chrome将引用第二种字体，Firefox将简单地返回传入的内容，这是一个问题，因为我们返回

My，Awesome Font

，并且无法判断

My

是否是一种单独的字体。然而，忽略这个不可能处理的情况，我们需要编写一个小解析器来忽略带引号的字符串中的逗号：）@Nick：尽管这对“Times New Roman”有效，修复程序还需要更改选择框的值，并实际修复CSS值的指定方式，以实现完全的浏览器兼容性。你甚至可以在你的工作演示中看到这一点：-）@Andy-澄清一下？你可以不加引号地应用这个版本，它会工作的，让我添加到演示中。@Mircea，@Nick:请参阅我的评论回复。Chrome也会在

字体系列

中的任何逗号后插入空格，这打破了格言。@Mircea-你需要在

中选择一种格式来解决这个问题，你要么在空格上加引号，要么不保持简单，你更喜欢哪一种？目前单引号没有引号，但多引号有逗号。@Mircea-RegEx不是我喜欢的东西，所以希望有人能清理一下，但这种方法应该能起作用：+1这是你用HTML5和CSS3.Thanx Anurag做的一些有趣的事情。很高兴你注意到了。