Open
Bug 962990
Opened 11 years ago
Updated 2 years ago
input onblur weird problem
Categories
(Core :: DOM: Events, defect, P5)
Tracking
()
UNCONFIRMED
People
(Reporter: felipevencato, Unassigned)
Details
Attachments
(1 file)
|
2.25 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:26.0) Gecko/20100101 Firefox/26.0 (Beta/Release)
Build ID: 20131221082715
Steps to reproduce:
I will do some sort of excell on-line. It is working perfectly on Chrome, but not in firefox.
Debuging the code I notice a strange behavior on firefox.
I have a table full of inputs. I want to press(mouse down) and get the position of that input, than release(mouse up) and get the position of the second input.
The code annexed shows the problem.
<html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>td{width:100px;height:30px;border:2px solid black;}</style>
<script>
window.onload = function () {
document.body.onselectstart =function (event){return false};
var td = document.querySelectorAll('td');
for (var i = 0; i < td.length; i++)
{
td[i].onmousedown = function (event) {
// alert(1)
console.log('onmousedown:\nrow:' + event.target.parentElement.parentElement.rowIndex);
console.log('col:' + event.target.parentElement.cellIndex);
}
td[i].onmouseup = function (event) {
alert(2)
console.log('onmouseup:\nrow:' + event.target.parentElement.parentElement.rowIndex);
console.log('col:' + event.target.parentElement.cellIndex);
}
td[i].innerHTML = '<input type="text">';
td[i].lastChild.value = i;
td[i].lastChild.onblur = function (event) {
alert(3);
console.log('onblur:\nrow:' + event.target.parentElement.parentElement.rowIndex);
console.log('col:' + event.target.parentElement.cellIndex);
}
}
}
</script>
</head>
<body>
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
Actual results:
In Chrome happend as expected. I get 2 different positions and the onblur event it is not activated until I change the focus from 1 field to another
In Firefox is really weird. I get 3 times the same position.
1st time from the onmousedown event
2st time the same position from the onblur event
3rd time the same position from the on mouseup event
Expected results:
I want to get 2 different positions when I have 2 differents inputs involved and I dont want the onblur event being activated.
The onblur event should only be triggered when I press [TAB] or I focus another input to edit.
|
Reporter | |
Updated•11 years ago
|
Severity: normal → major
|
||
Updated•11 years ago
|
Severity: major → normal
|
|
||
Comment 1•11 years ago
|
||
Note, in gecko there is no selectstart event.
|
|
||
Comment 2•11 years ago
|
||
So you get blur because there is alert in mouseup.
Chrome's behavior looks wrong to me. <input> certainly doesn't have focus when alert is shown.
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 3•11 years ago
|
||
Read again my friend. It is not onfocus, it is onblur and that is the problem.
If you test the code I put there, you will see that the firt input where press the mouse buttom dont loses the focus when you release in another input.
If it dont loses the focus it shoul not active the onblur event.
Load the page > click on the first input > release in any other input
|
|
Reporter | |
Updated•11 years ago
|
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
|
|
||
Comment 4•11 years ago
|
||
Can you reproduce the issue if you remove those alert()s ? Since I can't.
alert() causes the <input> to lose focus, so it gets blur.
|
|
Reporter | |
Comment 5•11 years ago
|
||
You are right. The alert was triggering the on blur.
But I still have the same issue. The console.log return the same position(position of the first input i click) 2 times. First from the mousedown of the first input and 1 fron the mouseup of the other input.
|
|
||
Comment 6•11 years ago
|
||
If you want to prevent drag-like behavior, call event.preventDefault() in the mousedown listener.
|
|
Reporter | |
Comment 7•11 years ago
|
||
(In reply to Olli Pettay [:smaug] from comment #6)
> If you want to prevent drag-like behavior, call event.preventDefault() in
> the mousedown listener.
I try your tip but It does not work. The script return the same position 2 time.
|
|
Reporter | |
Comment 8•11 years ago
|
||
I test the script on window and it gave me the same result.
|
|
Reporter | |
Comment 9•11 years ago
|
||
Windows(In reply to felipevencato@gmail.com from comment #8)
> I test the script on window and it gave me the same result.
Windows
|
||
Comment 10•6 years ago
|
||
https://bugzilla.mozilla.org/show_bug.cgi?id=1472046
Move all DOM bugs that haven’t been updated in more than 3 years and has no one currently assigned to P5.
If you have questions, please contact :mdaly.
Priority: -- → P5
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•