From 50853eea2fe599d1cdf2b56c181d02843ff09c7f Mon Sep 17 00:00:00 2001 From: yumoqing Date: Sat, 28 Feb 2026 13:31:52 +0800 Subject: [PATCH] bugfix --- bricks/css/bricks.css | 18 ++++++++++++++++++ bricks/input.js | 29 +++++++++++++++++++++++++++-- 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 1813dc4..70e2c61 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -611,3 +611,21 @@ hr { height: 50px; } +.auto-textarea { + width: 100%; + min-height: 40px; /* 初始高度 */ + max-height: 150px; /* 最大高度:超过此高度将滚动 */ + line-height: 1.5; + padding: 10px; + box-sizing: border-box; + resize: none; /* 禁用右下角手动拉伸 */ + overflow-y: hidden; /* 初始隐藏滚动条 */ + border: 1px solid #ccc; + border-radius: 4px; + outline: none; + transition: border-color 0.2s; +} + +.inputbox:focus { + border-color: #007bff; +} diff --git a/bricks/input.js b/bricks/input.js index 49cb004..e305b1f 100644 --- a/bricks/input.js +++ b/bricks/input.js @@ -923,13 +923,38 @@ bricks.UiText =class extends bricks.UiType { constructor(opts){ opts.dynsize = opts.dynsize || true; opts.cfontsize = opts.cfontsize || 1; - opts.height = '200px'; + if (opts.css){ + opts.css += 'auto-textarea'; + } else { + opts.css = 'auto-textarea'; + } super(opts); this.uitype='text'; this.build(); this.charsize_sizing(); this.set_style('overflow', 'auto'); - this.bind('keydown', this.key_handle.bind(this)) + this.bind('oninput', this.handleInput.bind(this)); + this.bind('keydown', this.key_handle.bind(this)); + } + handleInput() { + // 1. 重置高度为 auto,以便能够正确计算缩减后的 scrollHeight + var el = this.dom_element; + el.style.height = 'auto'; + + // 2. 获取当前的滚动高度 + const scrollHeight = el.scrollHeight; + // 3. 获取 CSS 中定义的 max-height (150px) + const maxHeight = parseInt(window.getComputedStyle(el).maxHeight); + + if (scrollHeight >= maxHeight) { + // 4. 如果内容高度超过最大高度,固定为最大高度并显示滚动条 + el.style.height = maxHeight + 'px'; + el.style.overflowY = 'auto'; + } else { + // 5. 否则持续自适应高度,并隐藏滚动条 + el.style.height = scrollHeight + 'px'; + el.style.overflowY = 'hidden'; + } } create(){ this.dom_element = this._create('textarea');