jQuery的VAL無法在Chrome

正常工作，我有一個簡單的jQuery功能：jQuery的VAL無法在Chrome

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

當點擊一個span元素（鼠標按下）的輸入（#family）獲取其字體家族價值。它適用於FireFox，但在Chrome中它只適用於僅由一個詞組成的字體系列。格魯吉亞將工作，但時代新羅馬不會。

你可以在這裏看到代碼：

http://jsfiddle.net/aLaGa/

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

有什麼不對呢？ Thanx

來源

2010-05-27 Mircea

+1這是你用HTML5和CSS3做的一些有趣的事情。 – Anurag 2010-05-27 21:01:59

Thanx Anurag。很高興你注意到。 – Mircea 2010-05-28 12:32:39

可以稍微改變你的腳本來替換WebKit的加引號時的字體名稱包含空格，如：

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

You can see a working demo here :)

And here's a RegEx approach pulling the literal value out of style that's probably easier than anything，但我不是一個正則表達式大師，有人可以自由地改善這一點，並更新答案（我吮吸RegEx，對不起！）這適用於你所有的例子。

來源

2010-05-27 10:18:45

@Nick：雖然這將適用於'Times New Roman'，但修復需要儘可能遠也改變了選擇框的值，並且實際上修改了爲完全瀏覽器兼容性指定CSS值的方式。你甚至可以在你的工作演示中看到這個:-) – 2010-05-27 10:21:03

Thanx Nick，當你點擊Adage時，它不起作用... – Mircea 2010-05-27 10:21:11

@Andy - 澄清一下？你可以使用不帶引號的版本，它會工作，讓我加入演示。 – 2010-05-27 10:21:59

-1

字體系列給出了逗號分隔值列表，而不是使用的字體。它也可以用報價給出價值。在您的示例頁面，添加行alert(ff)給出：

'Times New Roman'

Georgia

adage-script-1, adage-script-2

來源

2010-05-27 10:13:48 Eric

鍍鉻包裹有單引號多個字字體系列。所以在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。選擇列表，就必須改變遵循這個一致的命名方案，值：

fontName[, fontName]

這在很大程度上依賴於這樣一個事實：字體名稱將不包含任何逗號，或不使用引號。

來源

2010-05-27 10:14:45 Anurag

嗯，所以我必須去掉昏暗的返回值 – Mircea 2010-05-27 10:16:28

+1，正好在我編輯標籤並修正拼寫錯誤之後發佈這條消息。另外值得一提的是，Chrome在逗號分隔字體系列的逗號後插入空格，所以點擊「Adage」也不起作用。 – 2010-05-27 10:18:48

這是另一個好點@Andy，我錯過了。 – Anurag 2010-05-27 10:29:10

jQuery的VAL無法在Chrome

回答

相關問題