mirror of https://github.com/sveltejs/svelte
30 lines
756 B
30 lines
756 B
6 years ago
|
<script>
|
||
|
let text = `Select some text and hit the tab key to toggle uppercase`;
|
||
|
|
||
|
async function handleKeydown(event) {
|
||
5 years ago
|
if (event.key !== 'Tab') return;
|
||
6 years ago
|
|
||
|
event.preventDefault();
|
||
|
|
||
|
const { selectionStart, selectionEnd, value } = this;
|
||
|
const selection = value.slice(selectionStart, selectionEnd);
|
||
|
|
||
2 years ago
|
const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();
|
||
6 years ago
|
|
||
2 years ago
|
text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);
|
||
6 years ago
|
|
||
|
// this has no effect, because the DOM hasn't updated yet
|
||
|
this.selectionStart = selectionStart;
|
||
|
this.selectionEnd = selectionEnd;
|
||
|
}
|
||
|
</script>
|
||
|
|
||
2 years ago
|
<textarea value={text} on:keydown={handleKeydown} />
|
||
|
|
||
6 years ago
|
<style>
|
||
|
textarea {
|
||
|
width: 100%;
|
||
|
height: 200px;
|
||
|
}
|
||
|
</style>
|