The selectionDirection DOM property
selectionDirection is a JavaScript property of text inputs and textareas that returns forward, backward or none. It tells you which way the user selected text, and you can set it with setSelectionRange(start, end, 'backward'). Like the other selection properties, it has no HTML attribute.
Overview
selectionDirection is a JavaScript property that reports which way a field's text selection was made. It returns forward, backward or none, and like selectionStart and selectionEnd it exists only in script, never as an HTML attribute.
The meaning depends on the operating system, according to the HTML standard. On Windows the direction tells you where the caret sits, at the end of a forward selection or at the start of a backward one. On macOS it tells you which end moves when the user extends the selection with Shift and an arrow key.
Not every platform has a none direction. Windows doesn't, so there the value reads forward even right after you set it to none, as our Chrome test on Windows confirmed. On macOS none is the starting value until the user picks a direction.
You can set the direction by assigning the property or by passing a third argument to setSelectionRange(start, end, direction). Any value other than forward or backward is treated as none. On email and number inputs the property is null, and setting it throws an error.
Syntax
<label for="code">Code</label>
<input type="text" id="code" value="ABCDEF">
<script>
const code = document.getElementById('code');
code.setSelectionRange(1, 4, 'backward');
const direction = code.selectionDirection;
</script>Values
| Value |
|---|
| forward | backward | none |
Example
<label for="word">Select text with the mouse, or with Shift and an arrow key</label><br>
<input type="text" id="word" value="Drag across this text" size="30">
<button type="button" id="back">Select 2 to 8 backward</button>
<p id="dir"></p>
<script>
const word = document.getElementById('word');
function report() {
document.getElementById('dir').textContent = 'selectionDirection is ' + word.selectionDirection + ', from ' + word.selectionStart + ' to ' + word.selectionEnd;
}
['select', 'keyup', 'mouseup'].forEach(function (type) {
word.addEventListener(type, report);
});
document.getElementById('back').addEventListener('click', function () {
word.focus();
word.setSelectionRange(2, 8, 'backward');
report();
});
report();
</script>Best practices
- Don't rely on the value
none, since Windows reportsforwardin its place. - Read
selectionDirectiontogether withselectionStartandselectionEnd, because the direction alone doesn't say where the selection is. - Pass the saved direction to
setSelectionRange()when restoring a selection, as the HTML standard's own example does. - Test selection code on both Windows and macOS, where the same direction value describes different behavior.
Frequently asked questions
What values can selectionDirection return?
Why does selectionDirection say forward when I set it to none?
How do I set the selection direction in JavaScript?
input.selectionDirection = 'backward' changes it without moving the selection.
