jquery - 标签上可编辑,如何防止它在点击时失去焦点?

标签 jquery events jeditable

我正在构建一个简单的脚本,允许用户动态添加电话号码。这些输入与标签配对,都可以即时编辑。我使用 jeditable 作为标签,但后来遇到了一个小问题,如果用户尝试在标签的输入框中单击,浏览器将检测到对标签的单击并将焦点放在输入元素上标签的“for”属性。

我尝试了以下方法:

$(selector).find('input').live('focus', function(){
    $(selector).click(function(e){
        e.preventDefault;
        return false;
    });
}).live('blur', function(){
    //somehow reattach the behaviour here?
});

本质上,“选择器”保存了我的可编辑标签的选择器。我找到了其中的输入,并且在焦点上我禁用了标签的默认行为。这可以防止标签改变焦点。但是,我不知道如何撤消此操作。我想我可以切换一个 bool 标志,然后调用单独的方法来阻止默认设置,但我有一种感觉,必须有一个更简洁的方法来做到这一点,有什么建议吗?

最佳答案

另一种方法是在编辑标签时删除 for 属性,然后在编辑后重新添加该属性。

// store the "for" attr in the element's data
$('label').each(function() {
    $(this).data('for', $(this).attr('for'));
});

$('label').editable('...', {
    ...
    onreset: function() {
        var $label = $(this).parent();
        $label.attr('for', $label.data('for'));
    }
}).click(function() {
    $(this).removeAttr('for');
});

查看实际效果:http://jsfiddle.net/G8QuA/ .

关于jquery - 标签上可编辑,如何防止它在点击时失去焦点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7807669/

相关文章:

javascript - $ ('#<form name> input[name=<field>]' ).val() 返回未定义?

javascript - 如何在调用不带括号的函数时传递参数[Javascript]

javascript - jQuery:改变最高值

java - 创建通用 GWT 事件 : is this a good approach?

Windows 的 C++ 事件跟踪 (ETW) 包装器

c# - 可在 ASP.NET Web 表单中编辑

jquery - 无法使用 jQuery 在 <td> 中获取文本

javascript - 用 Waypoint.Inview() 偏移

events - OnOpenExcelWorksheet 事件在工作表打开时触发?

css - Jeditable 按钮样式问题