jQuery val не работает должным образом в Chrome

Question

У меня есть простая функция jQuery:

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

При щелчке по элементу span (mousedown) ввод (#family) получает значение семейства шрифтов. Он работает в FireFox, но в Chrome он работает только для семейств шрифтов, состоящих только из одного слова. Грузия будет работать, а Times New Roman - нет.

Вы можете увидеть код здесь:

http://jsfiddle.net/aLaGa/

или жить на http://www.typefolly.com

Что не так с этим? Thanx

Answer 1

Chrome объединяет семейства шрифтов, состоящие из нескольких слов, в одинарные кавычки. Таким образом, значение для семейства шрифтов, возвращаемое в Chrome: '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(', '));
});

См. пример . Список выбора должен был быть изменен, чтобы следовать этой последовательной схеме именования для значений:

fontName[, fontName]

Это в значительной степени зависит от того факта, что имя шрифта не будет содержать запятые, заключенные в кавычки или без кавычек.

Answer 2

Вы можете слегка изменить свой сценарий, чтобы заменить кавычки, которые добавляет WebKit, когда имя шрифта содержит пробелы, например:

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

Рабочее демо можно посмотреть здесь :)

И вот подход RegEx, извлекающий буквальное значение из style, который, вероятно, проще, чем что-либо , но я не гуру RegEx, кто-то не стесняется улучшить это и обновить ответ (я Соси в RegEx, извини!) Это работает для всех твоих примеров.

Answer 3

Font-family предоставляет список значений, разделенных запятыми, а не используемый шрифт. Это также может дать значение в кавычках. На странице примера добавление строки alert(ff) дает:

'Times New Roman'

Georgia

adage-script-1, adage-script-2