mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-25 03:36:36 +00:00
LibWeb: Implement input/textarea selection APIs
For both types of elements, `.selectionStart`, `.selectionEnd`, `.selectionDirection`, `.setSelectionRange()`, `.select()` and the `select` event are now implemented.
This commit is contained in:
parent
69bbeea4ef
commit
814ca3267e
Notes:
github-actions[bot]
2024-08-27 11:13:02 +00:00
Author: https://github.com/gmta
Commit: 814ca3267e
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1193
Reviewed-by: https://github.com/trflynn89 ✅
12 changed files with 436 additions and 142 deletions
|
@ -0,0 +1,46 @@
|
|||
<input type="text" id="text-input">
|
||||
<input type="date" id="date-input">
|
||||
<textarea id="textarea">some
|
||||
text</textarea>
|
||||
<script src="../include.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
let textInput = document.getElementById('text-input');
|
||||
let dateInput = document.getElementById('date-input');
|
||||
let textarea = document.getElementById('textarea');
|
||||
|
||||
const dumpSelection = (element) => {
|
||||
println(`${element.id} selectionStart: ${element.selectionStart} selectionEnd: ${element.selectionEnd} selectionDirection: ${element.selectionDirection}`);
|
||||
};
|
||||
|
||||
dumpSelection(textInput);
|
||||
dumpSelection(dateInput);
|
||||
dumpSelection(textarea);
|
||||
|
||||
textInput.value = 'Well hello friends';
|
||||
dumpSelection(textInput);
|
||||
|
||||
try {
|
||||
dateInput.selectionStart = 0;
|
||||
} catch (e) {
|
||||
println(`date input setting selectionStart error: ${e}`);
|
||||
}
|
||||
|
||||
textInput.addEventListener('select', e => println(`select event fired: ${e.target.selectionStart} ${e.target.selectionEnd}`))
|
||||
textInput.select();
|
||||
dumpSelection(textInput);
|
||||
textInput.setSelectionRange(2, 4, 'forward');
|
||||
dumpSelection(textInput);
|
||||
textInput.selectionStart = 1;
|
||||
dumpSelection(textInput);
|
||||
textInput.selectionEnd = 5;
|
||||
dumpSelection(textInput);
|
||||
textInput.selectionStart = 6;
|
||||
dumpSelection(textInput);
|
||||
textInput.selectionDirection = 'backward';
|
||||
dumpSelection(textInput);
|
||||
|
||||
textarea.select();
|
||||
dumpSelection(textarea);
|
||||
});
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue