jQuery val no funciona correctamente en Chrome

Question

tengo una simple función de jQuery:

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

Cuando se hace clic en un elemento span (mousedown) una entrada (#family) toma su valor familia de fuentes. Funciona en Firefox pero en Chrome funciona solo para familias de fuentes compuestas de una sola palabra. Georgia funcionará, pero Times New Roman no lo hará.

Puede ver el código aquí:

http://jsfiddle.net/aLaGa/

o viven en http://www.typefolly.com

Lo que está mal con esto? Thanx

Answer 1

Puede cambiar la secuencia de comandos ligeramente para reemplazar las citas que WebKit añade cuando el nombre de la fuente contiene espacios, así:

$('#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, pero no soy una expresión regular gurú, alguien se siente libre de mejorar esto y actualizar la respuesta (yo chupo en RegEx, lo siento!) Esto funciona para todos los ejemplos que tiene.

Answer 2

Font-family proporciona una lista de valores separados por comas, no la fuente en uso. También puede dar el valor entre comillas. En su página de muestra, añadiendo la línea alert(ff) da:

'Times New Roman'

Georgia

adage-script-1, adage-script-2

Answer 3

Chrome envuelve familias de fuentes que tienen varias palabras con comillas simples. Por lo tanto, el valor de la familia de fuentes devuelta en Chrome es: 'Times New Roman', que no coincide con el valor en la lista de selección Times New Roman.

Teniendo en cuenta todas estas variaciones del navegador, creo que la mejor solución es dividir los nombres de familia por comas, recortar el comillas simples (si las hay) alrededor de cada nombre de fuente y unirlas más tarde. Use este valor sanitizado dentro de la lista de selección.

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

Ver example. La lista de selección tuvo que ser cambiado para seguir este esquema de nomenclatura coherente para los valores:

fontName[, fontName]

Esto en gran medida se basa en el hecho de que una fuente de nombre no contener comas, cotizadas o no.