jQuery val nicht richtig funktioniert in Chrome

Question

Ich habe eine einfache jQuery-Funktion:

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

Wenn ein span-Element geklickt wird (mousedown-) einen Eingang (#family) bekommt seine Schriftfamilie Wert. Es funktioniert in FireFox, aber in Chrome funktioniert es nur für Schriftfamilien, die nur aus einem Wort bestehen. Georgia wird arbeiten, aber Times New Roman wird nicht.

können Sie den Code sehen hier:

http://jsfiddle.net/aLaGa/

oder bei http://www.typefolly.com leben

Was mit diesem falsch? Thanx

Answer 1

Sie Ihr Skript leicht, die Anführungszeichen ersetzen ändern können, die WebKit hinzufügt, wenn die Schriftname Leerzeichen enthält, wie folgt aus:

$('#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, aber ich bin kein RegEx Guru, jemand fühlt sich frei, dies zu verbessern und die Antwort zu aktualisieren (ich suck bei RegEx, tut mir leid!) Dies funktioniert für alle Beispiele, die Sie haben.

Answer 2

Die Schriftfamilie gibt eine Liste kommagetrennter Werte an, nicht die verwendete Schrift. Es kann auch den Wert in Anführungszeichen geben. Auf der Musterseite, das Hinzufügen der Zeile alert(ff) gibt:

'Times New Roman'

Georgia

adage-script-1, adage-script-2

Answer 3

Chrome hüllt Schriftfamilien mehrere Wörter mit einfachen Anführungszeichen mit. Der in Chrome zurückgegebene Wert für font-family lautet also: 'Times New Roman', der nicht mit dem Wert in der Auswahlliste Times New Roman übereinstimmt.

In Anbetracht all dieser Browservariationen denke ich, dass die beste Lösung darin besteht, die Familiennamen durch Kommas auseinander zu schneiden, das Anführungszeichen (falls vorhanden) um jeden Schriftartnamen zu trimmen und sie später zu verbinden. Verwenden Sie diesen bereinigten Wert in der Auswahlliste.

$('#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(', ')); 
}); 

Siehe eine example. Die Auswahlliste mußte geändert werden, um dieses konsistente Namensschema für Werte zu folgen:

fontName[, fontName]

Dieses schwer beruht auf der Tatsache, dass ein font-Name wird nicht keine Kommas enthält, zitiert oder nicht notiert.