时间戳

首页 > 解决方案 > 单击后使用文本区域打开对话框

javascript - 单击后使用文本区域打开对话框

问题描述

我正在创建一个 Java Spring Web 应用程序，其中有一个表格供用户填写。在表单中，我有一个 textarea 输入类型作为字段之一。在查看表单时，我只希望 textarea 显示大约 50 个字符，然后以 '...' 或其他内容结尾。但是，该字段本身最多可以包含 250 个字符。所以，我想要发生的是，如果用户单击该字段，则整个文本区域会在一个单独的对话框中打开，以便用户可以看到可能在正常字段视图中被截断的所有字符。我没有太多开始，但对于 JavaScript，我将给出一个基础：

    document.getElementById('hwDescription').onclick = function () {
        ...
    }

HTML元素是：

<form:input id="hwDescription" type="text" class="form-control" path="hwDescription"
                    name="hwDescription" placeholder="Description" />

任何帮助将不胜感激。谢谢！

标签： javascripthtmlonclickmodal-dialogtextarea

解决方案

我将最小尺寸设置为 10 查看预览，这可能对您有用。

document.getElementById('hwDescription').onclick = function () {
    
    this.classList.add("large");
        
    this.onkeypress = this.onkeydown = function() {
        this.size = ( this.value.length > 10 ) ? this.value.length : 10;
    };


}
.large { 
   border: 1px solid #0d0;
}
<input id="hwDescription" type="text" class="form-control short" path="hwDescription" name="hwDescription" placeholder="Description" />

推荐阅读