jQuery 字体选择器:显示和隐藏焦点

jQuery Font Selector: show&hide with focus

本文关键字：隐藏 焦点 显示 字体 选择器 jQuery      更新时间：2023-09-26

我正在尝试在我的项目中实现jQuery字体选择器，但我在实现它时遇到了一些麻烦。我正在使用我在这里找到的源代码 jQuery 字体选择器您可以在此处查看演示

一切都运行良好，除了此代码的作者没有包含如果我们单击屏幕上的其他任何位置时关闭"滚动菜单"的功能。您被迫在该列表中选择一些内容才能关闭此列表。

我将在此处粘贴代码，以便更容易解释。

/**
* Font selector plugin
*/
jQuery.fn.fontSelector = function() {
var fonts = new Array(
'Arial,Arial,Helvetica,sans-serif',
'Arial Black,Arial Black,Gadget,sans-serif',
/* other fonts */);
  return this.each(function(){
    // Get input field
    var sel = this;
    // Add a ul to hold fonts
    var ul = $('<ul class="fontselector"></ul>');
    $('body').prepend(ul);
    $(ul).hide();
    jQuery.each(fonts, function(i, item) {
      $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a></li>');
      // Prevent real select from working
      $(sel).focus(function(ev) {
        ev.preventDefault();
        // Show font list
        $(ul).show();
        // Position font list
        $(ul).css({ top:  $(sel).offset().top + $(sel).height() + 4,
                left: $(sel).offset().left});
        // Blur field
        $(this).blur();
        return false;
      });
      $(ul).find('a').click(function() {
         var font = fonts[$(this).attr('class').split('_')[1]];
         $(sel).val(font);
         $(ul).hide();
        return false;
      });
    });
  });
 }

从这里我尝试修改代码，例如在模糊功能中添加$(ul).hide();......有效，但我不希望输入可手动编辑。我不希望用户能够修改输入的内容，除非选择字体。

我希望你不要与我问的问题混淆！

感谢您的帮助

编辑：讨论后的一些更改：

http://jsfiddle.net/ahkEv/4/

在jQuery.fn.fontSelector = function() {内添加以下内容 

$("body").click(function(){        
   $(".fontselector").hide();          
});

将$(sel).focus更改为

$(sel).click(function(ev) {

并将以下内容添加到$(ul).find('a').click(function(ev) { 

ev.stopPropagation();
相关文章：