kalk_web: Added placeholder

This commit is contained in:
bakk 2021-05-29 13:23:08 +02:00
parent 5401415bba
commit ddd075ef64
2 changed files with 12 additions and 2 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@paddim8/kalk-component", "name": "@paddim8/kalk-component",
"version": "1.2.0", "version": "1.2.1",
"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.", "description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
"svelte": "src/main.ts", "svelte": "src/main.ts",
"main": "public/build/bundle.js", "main": "public/build/bundle.js",

View File

@ -56,6 +56,10 @@
function setHtml(html: string) { function setHtml(html: string) {
highlightedTextElement.innerHTML = html; highlightedTextElement.innerHTML = html;
inputElement.value = highlightedTextElement.textContent; inputElement.value = highlightedTextElement.textContent;
if (!html) {
highlightedTextElement.innerHTML = `<span class='placeholder'>${hinttext}</div>`;
}
} }
function getHtml(): string { function getHtml(): string {
@ -310,7 +314,9 @@
class="highlighted-text" class="highlighted-text"
aria-hidden aria-hidden
bind:this={highlightedTextElement} bind:this={highlightedTextElement}
/> >
<span class="placeholder">{hinttext}</span>
</div>
<textarea <textarea
class="input" class="input"
placeholder={hinttext} placeholder={hinttext}
@ -388,6 +394,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
.placeholder {
color: gray;
}
.prompt { .prompt {
background-color: inherit; background-color: inherit;
} }