Question

我无法弄清楚如何在没有错误的情况下创建这个简单的函数。我真的不在乎我使用的工具提示插件，我尝试了其中的4个，而且我在其中任何一个都没有成功。我希望它能够正常工作。我需要它用于验证目的，因此当用户犯错误时，它会立即让他知道他做错了什么。当我尝试创建它时，它可以：

根本不显示
暂时显示
显示一次，永不隐藏
显示一次，隐藏一次，永不再出现

我在使用冲突的keydown / keypress，破坏工具提示等方面遇到麻烦。

我尝试使用jquery插件工具提示器：

HTML：

<input type="text" />

JS：

jQuery.fn.tooltipError =
function(error)
{
    return this.each(function(e)
    {
        var t = $(this);
        t.tooltipster({ content: error, toggle: 'custom'});
        $(window).on('keyup',function() {
            // t.tooltipster('hide');
            t.tooltipster('destroy');
        });
        t.tooltipster('show');
    });
};

$('input').keydown(function(e) {
    if (e.key == 'a')
    {
        $(this).tooltipError('Char "a" not allowed');
        e.preventDefault();
    }
});

jsfiddle：http://jsfiddle.net/o946zb2b/

Answer 1

您应该确保仅在工具提示尚未显示时显示工具提示，并且只有在工具提示存在时才会销毁工具提示。当按下的键是首先触发工具提示的键时，您也不应该触发keyup事件。这将处理它：

jQuery.fn.tooltipError =
function(error, isError)
{
    return this.each(function(e)
    {
        var t = $(this);
        if (!isError && t.hasClass("tooltipstered"))
            t.tooltipster("destroy");

        if (isError && !t.hasClass("tooltipstered"))
        {
            t.tooltipster({ content: error, toggle: "custom"});
            t.tooltipster("show");
        }
    });
};

$("input").keydown(function(e) {
    if (e.key == "a")
        e.preventDefault();
    $(this).tooltipError('Char "a" not allowed', e.key == "a");
});

<强> FIDDLE

编辑：更新了删除双重检查和修复小提琴链接的答案。此外，没有这样的警告：

Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips.

将在连续多次输入a时在控制台中记录。

编辑2：更新了答案以销毁函数本身的工具提示。

Answer 2

现有问题相对简单。当密钥关闭时，您将绑定到密钥。它会在您释放密钥后立即触发

我建议在绑定新处理程序之前使用短暂的延迟，更重要的是，删除它也

jQuery.fn.tooltipError = function (error) {
    return this.each(function (e) {
        var t = $(this);
        t.tooltipster({
            content: error,
            toggle: 'custom'
        });
        setTimeout(function () { /* short delay before iniitializing handler*/
            $(window).on('keydown.tooltip', function () {                    
                t.tooltipster('destroy');
                $(window).off('keydown.tooltip');/* remove handler*/
            });
        }, 10);
        t.tooltipster('show');
    });
};

的 DEMO

Answer 3

只需添加一个条件来检查对象是否初始化为：

jQuery.fn.tooltipError =
function(error, event, invalids)
{
   return this.each(function(e)
    {
       var t = $(this);
       var key = event.keyCode || e.which;
       if($.inArray(key,invalids) !== -1){
         t.tooltipster({ content: error, toggle: 'custom'});
          t.tooltipster('show');
          event.preventDefault();
         //t.val(t.substring(0,t.length -1));
      }else{
         if($(t).hasClass('tooltipstered')){
             $(t).tooltipster('destroy');
         }
      }
     //  return t;
   });
};

$('input').keydown(function(e) {

    var invalids = [65,66]; //Array as 65=A, 66=B
    $(this).tooltipError('Char "' + String.fromCharCode(e.keyCode) + '" not allowed', e, invalids);


});

请参阅 working demo

显示错误工具提示并将其隐藏在按键上的功能

3 个答案: