当用户在窗体外单击鼠标时,如何更新jEditable文本字段?

时间:2014-01-13 08:51:59

标签: jquery forms blur jeditable

我正在使用jEditable插件。我的问题是如何检测用户何时点击jEditable外部文本字段?

当用户在jEditable文本字段外单击时,仍然光标停留在文本字段中并且没有任何反应?

修改
我的jEditable表单看起来像

<span class="edit">
    <form>
        <input/>
    </form>
</span>

这是我目前的代码

$(".edit").editable("path/to/url", {
    indicator : "saving...",
    type   : 'text',
    event  : 'custom_event',
    submitdata : function(value, settings) {
        return {
            _method   : "post",
            myId    : jQuery("#id").val(), //extra needed id
        };
    },
    select : true,
    onblur : 'submit',
});
当我按{tab key}然后它提交文本字段的内容时,

'onblur'正在工作。但是当我在文本字段外单击鼠标时,没有任何反应,文本字段保持不变。

当用户在该文本字段外点击时,我还想提交文本字段的内容。

3 个答案:

答案 0 :(得分:3)

我刚刚找到了解决问题的工作方案,可能会帮助其他人......

$(document).mouseup(function (e) {
    var container = $(".edit");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if(container.find("form").length > 0) {
            container.find("form").submit();
        }
    }
});

我从SO Answer之一找到了这个答案。所以,如果有兴趣的人请看看给出的链接。

答案 1 :(得分:1)

问题是事件:attr你设置“custom_event”它需要一些js事件,如点击等,这就是为什么onblur不工作.. 这是工作解决方案--- Fiddle Demo

$(".edit").editable("path/to/url", {
 indicator : "saving...",
 type   : 'text',
 event  : 'click',
 submitdata :  function  (value, settings) {
      return {
       _method   : "post",
       myId    : jQuery("#id").val(), //extra needed id
    };  } ,
 select : true,
 submit: "Submit",
 onblur : function() {           
   $(".edit").find("form").submit();
  }                  
});

答案 2 :(得分:0)

尝试focusout事件而不是blur

参考:http://api.jquery.com/focusout/