This commit is contained in:
yumoqing 2026-02-28 13:31:52 +08:00
parent 9e8d0e6c98
commit 50853eea2f
2 changed files with 45 additions and 2 deletions

View File

@ -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;
}

View File

@ -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');