CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 自定义多行富文本输入框！

Browse Source
This commit is contained in:
CrescentLeaf
2026-01-08 23:10:25 +08:00
parent 82de2eff42
commit 7db95ed677
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/ui/MduiPatchedTextAreaElement.ts
View File

@@ -3,8 +3,8 @@ import { $ } from "mdui"
export default class MduiPatchedTextAreaElement extends HTMLElement { export default class MduiPatchedTextAreaElement extends HTMLElement {
static observedAttributes = ['value', 'placeholder'] static observedAttributes = ['value', 'placeholder']
declare inputDiv?: HTMLDivElement declare inputDiv?: HTMLDivElement
declare inputPlaceHolderDiv?: HTMLDivElement
declare inputContainerDiv?: HTMLDivElement declare inputContainerDiv?: HTMLDivElement
declare placeholder?: string | number | null
constructor() { constructor() {
super() super()
@@ -18,8 +18,10 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
this.inputContainerDiv = new DOMParser().parseFromString(` this.inputContainerDiv = new DOMParser().parseFromString(`
<div style="overflow-y: auto; height: 100%;"> <div style="overflow-y: auto; height: 100%;">
<div role="textbox" aria-multiline="true" aria-labelledby="txtboxMultilineLabel" contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-break: break-word; white-space: pre-wrap;"></div> <div role="textbox" aria-multiline="true" aria-labelledby="txtboxMultilineLabel" contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-break: break-word; white-space: pre-wrap;"></div>
<div style="display: none;"></div>
<style> <style>
[contenteditable="true"]:empty:before {
content: attr(data-placeholder);
}
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 7px; width: 7px;
height: 10px; height: 10px;
@@ -51,15 +53,8 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
</div> </div>
`, 'text/html').body.firstChild as HTMLDivElement `, 'text/html').body.firstChild as HTMLDivElement
console.log(this.inputContainerDiv.children)
this.inputDiv = this.inputContainerDiv.children[0] as HTMLDivElement this.inputDiv = this.inputContainerDiv.children[0] as HTMLDivElement
this.inputPlaceHolderDiv = this.inputContainerDiv.children[1] as HTMLDivElement
this.inputDiv.addEventListener('input', () => {
// TODO: 修复 placeholder
this.inputPlaceHolderDiv!.style.display = this.value == '' ? '' : 'none'
this.inputDiv!.style.display = this.value == '' ? 'none' : ''
})
this.inputDiv.addEventListener('blur', () => { this.inputDiv.addEventListener('blur', () => {
if (this._lastValue !== this.value) { if (this._lastValue !== this.value) {
this._lastValue = this.value || '' this._lastValue = this.value || ''
@@ -73,16 +68,19 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
this.inputDiv.style.width = '100%' this.inputDiv.style.width = '100%'
$(this.inputDiv).attr('data-placeholder', $(this).attr('placeholder'))
shadow.appendChild(this.inputContainerDiv) shadow.appendChild(this.inputContainerDiv)
} }
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
console.log(this.inputDiv, name, oldValue, newValue)
switch (name) { switch (name) {
case 'value': { case 'value': {
this.value = newValue || '' this.value = newValue || ''
break break
} }
case 'placeholder': { case 'placeholder': {
this.inputPlaceHolderDiv && (this.inputPlaceHolderDiv.innerText = newValue || '') this.inputDiv && $(this.inputDiv).attr('data-placeholder', newValue)
break break
} }
} }