When multiple cells in the table are selected, the selection is wrong
Categories
(Core :: DOM: Selection, defect, P3)
Tracking
()
People
(Reporter: CodePlayer360, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: parity-chrome, testcase)
Attachments
(1 file)
|
(deleted),
image/gif
|
Details |
firefox-editor-selection-demo.gif
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Steps to reproduce:
My firefox version is 64.0.2 (64bit) in Windows 7 (64bit).
In a rich-text editor, I want to drag the mouse to select multi-row cells within the table. Then, execute "window.getSelection()" in the console.
The source code of html file is as follows:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>CodePlayer Editor</title>
<style>
.editor {
min-width: 800px;
min-height: 600px;
border: 1px solid #ccc;
padding: 5px;
}
td,
th {
border: 1px solid #ccc;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="editor" class="editor" contenteditable="true">
<table>
<tbody>
<tr>
<th>hello</th>
<th>world</th>
<th>java</th>
</tr>
<tr>
<td>js</td>
<td>css</td>
<td>html</td>
</tr>
<tr>
<td>yes</td>
<td>or</td>
<td>no</td>
</tr>
<tr>
<td>hehah</td>
<td>OK</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Actual results:
However, the return value is incorrect. The "Selection.anchorNode" and "Selection.focusNode" still always on the same row even if I select multiple different rows.
Using Chrome for the same operation, the output is not the same, the result of chrome is in line with expectations.
Expected results:
The anchorNode and focusNode of the selection should correspond to the correct node.
|
Reporter | |
Comment 1•6 years ago
|
||
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>CodePlayer Editor</title>
<style>
.editor {
min-width: 800px;
min-height: 600px;
border: 1px solid #ccc;
padding: 5px;
}
td,
th {
border: 1px solid #ccc;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="editor" class="editor" contenteditable="true">
<table>
<tbody>
<tr>
<th>hello</th>
<th>world</th>
<th>java</th>
</tr>
<tr>
<td>js</td>
<td>css</td>
<td>html</td>
</tr>
<tr>
<td>yes</td>
<td>or</td>
<td>no</td>
</tr>
<tr>
<td>hehah</td>
<td>OK</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Based on the above demo, the Selection.anchorNode should be at the first row of the table.
|
||
Updated•6 years ago
|
|
||
Updated•6 years ago
|
|
||
Comment 2•6 years ago
|
||
Guys,
While the table/cell selection feature in Firefox is cool, it is not on any standards track and is unsupported in any other browser. There are also a number of quarks in the implementation.
There are plenty of good well documented ways using css and javascript to implement cross browser table/cell selection.
As the standard bearer, shouldn't we be trying to promote standards and harmony between browsers rather than fragmentation. I say we depreciate and then remove this feature. Then, if we feel that table/cell selection should be implemented, let's instead work towards a new standard that everyone can benefit from.
Having written more than a few html editors in my day, I can tell you that having standardized and standards based behaviour between browsers makes for less code and better quality. I am sure that the folks at Tiny, ckEditor, etc. who have made html editors probably have a similar line of thinking.
Cheers,
Alex
|
||
Updated•2 years ago
|
Description
•