The <textarea>
element behaves similarly to a text input in Svelte — use bind:value
:
<textarea bind:value={value}></textarea>
In cases like these, where the names match, we can also use a shorthand form:
<textarea bind:value></textarea>
This applies to all bindings, not just textareas.
App.svelte
xxxxxxxxxx
12
1
<script>
2
import marked from 'marked';
3
let value = `Some words are *italic*, some are **bold**`;
4
</script>
5
6
<style>
7
textarea { width: 100%; height: 200px; }
8
</style>
9
10
<textarea value={value}></textarea>
11
12
{@html marked(value)}
Console
xxxxxxxxxx
59
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
HtmlTag,
4
SvelteComponent,
5
attr,
6
detach,
7
element,
8
init,
9
insert,
10
noop,
11
safe_not_equal,
12
space
13
} from "svelte/internal";
14
15
import marked from "marked";
16
xxxxxxxxxx
59
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
HtmlTag,
4
SvelteComponent,
5
attr,
6
detach,
7
element,
8
init,
9
insert,
10
noop,
11
safe_not_equal,
12
space
13
} from "svelte/internal";
14
15
import marked from "marked";
16
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
textarea.svelte-bas9dx{width:100%;height:200px}
xxxxxxxxxx
1
1
textarea.svelte-bas9dx{width:100%;height:200px}