Difficulty with jQuery and input keydown event
I am making a simple JavaScript enhanced list. I want it to be a list of inputs, each with an 'Add' and 'Remove' button. If the user clicks 'Add', a new li
will be added. If the user clicks 'Remove', that li
will be removed.
It works fine, except for hitting "enter" in an <input>
. Currently, it always causes the Remove.click
event handler to fire, unless there's only one item in the list. I'm not sure why. How can I suppress this?
Here is the complete jQuery. My attempt to fix the "enter" issue is commented out, and it doesn't work. I suspect that I could be designing this code better; if you see an improvement I'd love to hear it.
function make_smart_list(list)
{
var ADD_CLASS = 'foo-widget-Add';
var REMOVE_CLASS = 'foo-widget-Remove';
var jq_list = $(list);
jq_list.parents('form').submit(function() {
return false;
});
function refresh_handlers() {
jq_list.find(sprintf('.%s, .%s', REMOVE_CLASS, ADD_CLASS)).unbind('click');
// jq_list.find('input').unbind('submit');
//
// jq_list.find('input').submit(function() {
// var jq_this = $(this);
// var next_button = jq_this.nextAll('button');
// if (next_button.hasClass(ADD_CLASS)) {
// next_button.nextAll('button').click();
// return;
// }
//
// if (next_button.hasClass(REMOVE_CLASS)) {
// return false;
// }
//
// });
jq_list.find("." + REMOVE_CLASS).click(function() {
var jq_this = $(this);
jq_this.parent().remove();
refresh_handlers();
return false;
});
jq_list.find("." + ADD_CLASS).click(function() {
var jq_this = $(this);
if (jq_this.prevAll('input').val() == '') {
return;
}
jq_this.parent().clone().appendTo(jq_this.parent().parent());
jq_this.parent().next().find('input').val('').focus();
jq_this.removeClass(ADD_CLASS).addClass(REMOVE_CLASS);
jq_this.text('Remove');
refresh_handlers();
return false;
});
}
refresh_handlers();
}
(sprintf
is another script I have.)
Update: The markup looks like:
<ul id="id_bar" class="foo-widget-list">
<li><input value=""><button class="foo-widget-Remove">Remove</button></li>
<li><input value=""><button class="foo-widget-Add">Add</button></li>
</ul>
This is part of a form that contains other components开发者_如何学Go, but all I'm concerned about is this part.
Script to actually activate the list:
$(function() {
$.each($('.foo-widget-list'), function(index, item) {
make_smart_list(item)
});
});
Update 2: Setting the keydown as follows works to prevent problems with inputs by "Remove" buttons:
jq_list.find('input').keydown(function(e) {
var next_button = $(this).nextAll('button');
if (e.keyCode == ENTER_KEYCODE && next_button.hasClass(REMOVE_CLASS)) {
return false;
}
But pressing enter while focused on an input by an "Add" button still results in the remove.click
handler being fired.
});
In the keup docs, it actually has a specific example for detecting the hitting of the 'enter' key. Here's an excerpt, slightly modified to (hopefully) make it easier to put into your code:
$([element_selector]).keyup(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
}
// other keyup code here
});
You'll want to put this in a handler that you put on an element when you create it, but this basic idea should work okay.
This should work:
$('input').keydown(function(e) {
if (e.keyCode == 13) { return false; }
});
You just track the ENTER key and kill the event if it is pressed.
Note that the submit()
method is used only on <form>
elements, not its fields.
No jQuery needed. Just overwrite the onsubmit
event of all the forms in the page.
var inputs=document.all.tags('form')||document.getElementsByTagName('form');
for(x=0;x<inputs.length;x++){
inputs[x].onsubmit=function(){
return false;
}
}
精彩评论