Wul*_*ulf 5 javascript jquery events
我有几行文本,我可以通过用输入替换内联行来"编辑",该输入将行中的文本作为其value属性.
当输入失去焦点时,将恢复先前的文本.
按return(keyCode 13)时,将保存新文本并将其写入行中.
现在,对于不知道按回车保存文本的用户,我想在输入字段旁边添加一个"保存"按钮.但是当按下它时,输入字段的模糊事件将首先被触发,丢弃更改.
那么有一个简单的方法,按钮的.click()事件可以取消输入字段上的.blur()事件吗?也许是"不执行其他事件"或者我可以在模糊事件中看到哪些事件会被调用,然后取消它?
这是一个jsfiddle,看看我的意思:http://jsfiddle.net/ykY5X/ (我在Firefox(最新的Nightly)工作,按钮点击不起作用.我刚刚在chrome中测试了jsfiddle,密钥在哪里也不会按预期工作.)
$('#showEdit').click(function() {
$('#row').data('text',$('#row').text());
$('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>');
$('#editInput').val($('#row').data('text')).focus();
});
$('#row').delegate('#editInput','keyup',function(e) {
e.stopPropagation();
var keycode = e.keyCode || e.which;
if (keycode == 13) $('#editSave').click();
}).delegate('#editSave','click',function(e) {
e.stopPropagation();
$('#row').text($('#editInput').val());
}).delegate('#editInput','blur',function() {
$('#row').text($('#row').data('text'));
});
Run Code Online (Sandbox Code Playgroud)
我最终的工作解决方案是这样的:
$('#showEdit').click(function() {
$('#row').data('textOriginal',$('#row').text());
$('#row').data('textSave',$('#row').text());
$('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>');
$('#editInput').val($('#row').data('textOriginal')).focus();
});
$('#row').delegate('#editInput','keyup',function(e) {
e.stopPropagation();
var keycode = e.keyCode || e.which;
if (keycode == 13) {
$('#row').data('textSave',$(this).val());
$('#editSave').click();
}
}).delegate('#editSave','mousedown',function() {
$('#row').data('textSave',$('#editInput').val());
}).delegate('#editSave','click',function(e) {
e.stopPropagation();
if ($('#row').data('textOriginal') == $('#row').data('textSave')) {
$('#row').text($('#row').data('textOriginal'));
return;
}
$('#row').text($('#row').data('textSave'));
}).delegate('#editInput','blur',function() {
$('#editSave').click();
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2315 次 |
| 最近记录: |