多行文本控件(富文本框)怎樣自動填寫？

謂多行文本輸入控件，就是網(wǎng)頁表單中，因輸入內容較多需換行顯示的文本輸入控件，一般為textarea元素。很多富文本輸入框也是對textarea進行包裝。

多選文本輸入框

自動填寫多行文本輸入控件的五種方法
1、通過修改元素屬性填表
textarea元素比較特殊，在html中直接指定value屬性值是無效的。修改textarea元素的text屬性，可以實現(xiàn)自動填表，但要求textarea元素未被腳本賦值的情況下text才有效。修改text屬性不會觸發(fā)元素綁定的事件，但在木頭瀏覽器填寫項目中，可以明確指定填表前和填表后需要觸發(fā)的事件。

修改元素屬性

2、由系統(tǒng)向瀏覽器發(fā)送數(shù)據(jù)
在window系統(tǒng)下，這幾乎是一個萬能的方法，支持中文輸入，獲得控件元素后，填寫屬性設置為KeyboardSend。在自動輸入前，瀏覽器會自我激活為當前活動窗口，同時把輸入焦點轉移到設定的多行文本控件上。在輸入過程中，不能手工干預，不能讓控件失去焦點，也不能切換到別的程序窗口。輸入遠程會觸發(fā)控件綁定的事件代碼。

系統(tǒng)向瀏覽器發(fā)送內容

3、模擬人工鍵盤操作
獲取元素后，把填寫屬性設置為Keyboard，能達到人工按下實體鍵盤一樣的效果，因此不能輸入中文，執(zhí)行時同樣會自動激活瀏覽器窗體，輸入焦點轉移到多選文本控件上。輸入過程中會觸發(fā)元素綁定的相關事件。

模擬人工按鍵

4、模擬鍵盤事件
在不按下鍵盤的情況下，直接產(chǎn)生按鍵事件作用于當前活動窗口，獲取元素后設置填寫屬性為KeyboardEvent。與模擬人工操作效果一樣，自動激活瀏覽器窗體，定位輸入焦點到多行文本控件上才能完成輸入，亦不支持中文輸入，會觸發(fā)元素控件綁定的腳本事件。

發(fā)送鍵盤事件

5、執(zhí)行腳本代碼控制輸入
在項目管理窗口中，創(chuàng)建一個腳本代碼的步驟，執(zhí)行JavaScript代碼修改textarea的value屬性值。注意：textarea雖然在html中沒有value屬性，但在JavaScript代碼中是支持的。不管textarea是否被賦初值，都不影響腳本執(zhí)行填表效果。

document.getElementsByTagName("textarea")[0].value="木頭軟件";

也可以使用JQuery代碼，只要勾選【引入JQuery】，瀏覽器自動引用JQuery庫
$("textarea").eq(0).val("木頭軟件");

腳本填表多行文本框

執(zhí)行以上腳本輸入內容后，不會觸發(fā)控件綁定的事件，如有必要，可以在代碼中主動調用相關的事件處理代碼。也可以再添加一個填表步驟項目來主動觸發(fā)事件代碼執(zhí)行。

01CSS 實現(xiàn)多行文本“展開收起”

**引言：**

在Web前端開發(fā)中，文本內容的展示與交互常常扮演著至關重要的角色。特別是在信息爆炸的時代，合理有效地組織和展示文本信息顯得尤為關鍵。本文將聚焦一種常見的交互效果——多行文本的“展開收起”，并詳細探討如何僅使用CSS實現(xiàn)這一效果。我們將通過實戰(zhàn)代碼剖析其原理，以期幫助讀者更好地理解和應用這一技術，優(yōu)化用戶體驗。

---

### **一、基礎實現(xiàn)：CSS ellipsis和max-height**

**標題：** 初識`text-overflow: ellipsis`與`max-height`

在實現(xiàn)“展開收起”功能之前，我們先要了解如何用CSS實現(xiàn)多行文本省略的效果。以下是一個簡單的例子：

```html

這是一段很長很長的文本，可能會超過顯示區(qū)域，此時就需要截斷顯示...

</div>

<style>

.expand-collapse-text {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3; /* 行數(shù) */

-webkit-box-orient: vertical;

line-height: 1.5em;

max-height: 4.5em; /* 根據(jù)行高設置最大高度 */

}

</style>

```

上述CSS代碼設置了多行文本截斷效果，當文本超過指定的行數(shù)時，多余的文本會被替換為省略號“...”。

---

### **二、進階實現(xiàn)：“展開收起”按鈕與狀態(tài)切換**

**標題：** 結合JavaScript實現(xiàn)動態(tài)切換

接下來，我們將通過JavaScript動態(tài)改變CSS屬性，實現(xiàn)文本的“展開”與“收起”功能。首先，我們需要一個按鈕和相應的事件監(jiān)聽：

```html

這是一段很長很長的文本，可能會超過顯示區(qū)域，此時就需要截斷顯示...

</div>

const textContainer = document.getElementById('content');

const toggleBtn = document.getElementById('toggle-btn');

// 默認收起狀態(tài)

textContainer.style.maxHeight = '4.5em';

toggleBtn.addEventListener('click', () => {

if (textContainer.style.maxHeight === 'none') {

textContainer.style.maxHeight = '4.5em';

toggleBtn.textContent = '展開';

} else {

textContainer.style.maxHeight = 'none';

toggleBtn.textContent = '收起';

}

});

</script>

```

上述代碼中，我們首先獲取到了文本容器和按鈕元素，并設置文本容器的初始`max-height`。然后，為按鈕添加點擊事件監(jiān)聽器，根據(jù)`max-height`屬性判斷當前狀態(tài)，切換文本容器的`max-height`值以及按鈕的文本內容。

---

### **三、CSS動畫與過渡效果**

**標題：** 添加過渡動畫提升用戶體驗

為了讓“展開收起”過程更加平滑，我們可以加入CSS過渡動畫：

```css

.expand-collapse-text {

/* ...前面的樣式不變... */

transition: max-height 0.3s ease;

}

```

這樣，當`max-height`屬性發(fā)生改變時，文本容器的高度會以0.3秒的過渡時間逐漸變化，形成平滑的展開或收起動畫。

---

### **四、無障礙設計與輔助功能**

**標題：** 考慮無障礙訪問與ARIA標簽

為了提升無障礙訪問體驗，可以在按鈕上添加`aria-expanded`屬性，并隨狀態(tài)切換更新其值：

```html

```

在JavaScript中，同步更新`aria-expanded`屬性：

```javascript

toggleBtn.addEventListener('click', () => {

// ...之前的邏輯不變...

// 更新aria-expanded屬性

toggleBtn.setAttribute('aria-expanded', textContainer.style.maxHeight === 'none');

});

```

---

**結語：**

通過以上步驟，我們已經(jīng)成功實現(xiàn)了純CSS+JavaScript的多行文本“展開收起”功能，并且注重了過渡動畫和無障礙設計的考量。這種交互效果在很多場合都非常實用，如新聞摘要、用戶評論、產(chǎn)品詳情等。掌握這一技術，不僅可以提升頁面的交互體驗，還能彰顯出作為一名前端開發(fā)者對細節(jié)的關注和專業(yè)素養(yǎng)。持續(xù)優(yōu)化和改進此類交互效果，將有助于我們更好地服務用戶，提升產(chǎn)品的整體品質。

行文本展開收起是一個很常見的交互，如下圖演示

實現(xiàn)這一類布局和交互難點主要有以下幾點

位于多行文本右下角的“展開收起”按鈕
“展開”和“收起”兩種狀態(tài)的切換
當文本不超過指定行數(shù)時，不顯示“展開收起”按鈕

說實話，之前單獨看這個布局，即使借助 JavaScript 也不是一件容易的事啊（需要計算文字寬度動態(tài)截取文本，vue-clamp 就是這么做的），更別說下面的交互和判斷邏輯了，不過經(jīng)過我的一番琢磨，其實純 CSS 也能完美實現(xiàn)的，下面就一步一步來看看如何實現(xiàn)吧~

一、位于右下角的“展開收起”按鈕

很多設計同學都喜歡這樣的設計，把按鈕放在右下角，和文本混合在一起，而不是單獨一行，視覺上可能更加舒適美觀。先看看多行文本截斷吧，這個比較簡單

多行文本截斷

假設有這樣一個 html 結構

<div class="text">
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

多行文本超出省略大家應該很熟悉這個了吧，主要用到用到 line-clamp ，關鍵樣式如下

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

右下角環(huán)繞效果

提到文本環(huán)繞效果，一般能想到 浮動 float ，沒錯，千萬不要以為浮動已經(jīng)是過去式了，具體的場景還是很有用的。比如下面放一個按鈕，然后設置浮動

<div class="text">
  <button class="btn">展開</button>
  浮動元素是如何定位的
正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
</div>

.btn {
  float: left;
  /*其他裝飾樣式*/
}

如果設置右浮動

.btn {
  float: right;
  /*其他裝飾樣式*/
}

這時已經(jīng)有了環(huán)繞的效果了，只是位于右上角，如何將按鈕移到右下角呢？先嘗試一下 margin

.btn {
  float: right;
  margin-top: 50px;
  /*其他裝飾樣式*/
}

可以看到，雖然按鈕到了右下角，但是文本卻沒有環(huán)繞按鈕上方的空間，空出了一大截，無能為力了嗎？

雖然 margin 不能解決問題，但是整個文本還是受到了浮動按鈕的影響，如果有多個浮動元素會怎么樣呢？這里用偽元素來 ::before 代替

.text::before{
  content: '';
  float: right;
  width: 10px;
  height: 50px;/*先隨便設置一個高度*/
  background: red
}

現(xiàn)在按鈕到了偽元素的左側，如何移到下面呢？很簡單，清除一下浮動 clear: both; 就可以了

.btn {
  float: right;
  clear: both;
  /*其他裝飾樣式*/
}

可以看到，現(xiàn)在文本是完全環(huán)繞在右側的兩個浮動元素了，只要把紅色背景的偽元素寬度設置為0（或者不設置寬度，默認就是 0），就實現(xiàn)了右下角環(huán)繞的效果

.text::before{
  content: '';
  float: right;
  width: 0; /*設置為0，或者不設置寬度*/
  height: 50px;/*先隨便設置一個高度*/
}

動態(tài)高度

上面雖然完成了右下加環(huán)繞，但是高度是固定的，如何動態(tài)設置呢？這里可以用到 calc 計算，用整個容器高度減去按鈕的高度即可，如下

.text::before{
  content: '';
  float: right;
  width: 0;
  height: calc(100% - 24px);
}

很可惜，好像并沒有什么效果，打開控制臺看看，結果發(fā)現(xiàn) calc(100% - 24px) 計算高度為 0

原因其實很容易想到，就是 高度 100% 失效 的問題，關于這類問題網(wǎng)上的分析有很多，通常的解決方式是給父級指定一個高度，但是這里的高度是動態(tài)變化的，而且還有展開狀態(tài)，高度更是不可預知，所以設置高度不可取。

除此之外，其實還有另一種方式，那就是利用 flex 布局。大概的方法就是在 flex 布局的子項中，可以通過百分比來計算變化高度，具體可參考 w3.org 中關于 css-flexbox 的描述

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

因此，這里需要給 .text 包裹一層，然后設置 display: flex

<div class="wrap">
  <div class="text">
    <button class="btn">展開</button>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

.wrap{
  display: flex;
}

實踐下來，display: grid 和 display: -webkit-box 同樣有效，原理類似

這樣下來，剛才的計算高度就生效了，改變文本的行數(shù)，同樣位于右下角~

除此之外，動態(tài)高度也可以采用負的 margin 來實現(xiàn)（性能會比 calc 略好一點）

.text::before{
  content: '';
  float: right;
  width: 0;
  /*height: calc(100% - 24px);*/
  height: 100%;
  margin-bottom: -24px;
}

到這里，右下角環(huán)繞的效果就基本完成，省略號也是位于展開按鈕之前的，完整代碼可以查看 codepen 右下角多行展開環(huán)繞效果

4.其他瀏覽器的兼容處理

上面的實現(xiàn)是最完美的處理方式。原本以為兼容性沒什么大問題的，畢竟只用到了文本截斷和浮動，-webkit-line-clamp 雖然是 -webkit- 前綴，不過 firefox 也是支持的，打開一看傻了眼，safari 和 firefox 居然全亂了！

這就有點難受了，前面那么多努力都白費了嗎？不可能不管這兩個，不然就只能是 demo 了，無法用于生產(chǎn)環(huán)境。

趕緊打開控制臺看看是什么原因。一番查找，結果發(fā)現(xiàn)是 display: -webkit-box ！設置該屬性后，原本的文本好像變成了一整塊，浮動元素也無法產(chǎn)生環(huán)繞效果，去掉之后浮動就正常了

那么問題來了：沒有 display: -webkit-box 怎么實現(xiàn)多行截斷呢？

其實上面的努力已經(jīng)實現(xiàn)了右下角環(huán)繞的效果，如果在知道行數(shù)的情況下設置一個最大高度，是不是也完成了多行截斷呢？為了便于設置高度，可以添加一個行高 line-height，如果需要設置成3行，那高度就設置成 line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

為了方便更好的控制行數(shù)，這里可以把常用的行數(shù)通過屬性選擇器獨立出來（通常不會太多），如下

[line-clamp="1"] {
  max-height: 1.5em;
}
[line-clamp="2"] {
  max-height: 3em;
}
[line-clamp="3"] {
  max-height: 4.5em;
}
...

<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--5行-->
<div class="text" line-clamp="5">
 ...
</div>

可以看到基本上正常了，除了沒有省略號，現(xiàn)在加上省略號吧，跟在展開按鈕之前就可以了，可以用偽元素實現(xiàn)

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

這樣，Safari 和 Firefox 的兼容布局基本上就完成了，完整代碼可以查看 codepen 右下角多行展開環(huán)繞效果（全兼容）

二、“展開”和“收起”兩種狀態(tài)

提到 CSS 狀態(tài)切換，大家都能想到 input type="checkbox" 吧。這里我們也需要用到這個特性，首先加一個 input ，然后把之前的 button 換成 label ，并且通過 for 屬性關聯(lián)起來

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展開</label>
    浮動元素是如何定位的
  正如我們前面提到的那樣，當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。
  </div>
</div>

這樣，在點擊 label 的時候，實際上是點擊了 input 元素，現(xiàn)在來添加兩種狀態(tài)，分別是只顯示 3 行和不做行數(shù)限制

.exp:checked+.text{
  -webkit-line-clamp: 999; /*設置一個足夠大的行數(shù)就可以了*/
}

兼容版本可以直接設置最大高度 max-height 為一個較大的值，或者直接設置為 none

.exp:checked+.text{
  max-height: none;
}

這里還有一個小問題，“展開”按鈕在點擊后應該變成“收起”，如何修改呢？

有一個技巧，凡是碰到需要動態(tài)修改內容的，都可以使用偽類 content 生成技術，具體做法就是去除或者隱藏按鈕里面的文字，采用偽元素生成

<label class="btn" for="exp"></label><!--去除按鈕文字-->

.btn::after{
  content:'展開' /*采用content生成*/
}

添加 :checked 狀態(tài)

.exp:checked+.text .btn::after{
  content:'收起'
}

兼容版本由于前面的省略號是模擬出來的，不能自動隱藏，所以需要額外來處理

.exp:checked+.text .btn::before {
    visibility: hidden; /*在展開狀態(tài)下隱藏省略號*/
}

基本和本文開頭的效果一致了，完整代碼可以查看 codepen 多行展開收起交互，兼容版本可以查看 codepen 多行展開收起交互（全兼容）

還有一點，如果給 max-height 設置一個合適的值，注意，是合適的值，具體原理可以參考CSS 奇技淫巧：動態(tài)高度過渡動畫，還能加上過渡動畫

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就可以了*/
}

三、文本行數(shù)的判斷

上面的交互已經(jīng)基本滿足要求了，但是還是會有問題。比如當文本較少時，此時是沒有發(fā)生截斷，也就是沒有省略號的，但是“展開”按鈕卻仍然位于右下角，如何隱藏呢？

通常 js 的解決方式很容易，比較一下元素的 scrollHeight 和 clientHeight 即可，然后添加相對應的類名。下面是偽代碼

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk')
}

那么，CSS 如何實現(xiàn)這類判斷呢？

可以肯定的是，CSS 是沒有這類邏輯判斷，大多數(shù)我們都需要從別的角度，采用 “障眼法”來實現(xiàn)。比如在這個場景，當沒有發(fā)生截斷的時候，表示文本完全可見了，這時，如果在文本末尾添加一個元素（紅色小方塊），為了不影響原有布局，這里設置了絕對定位

.text::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: red;
}

可以看到，這里的紅色小方塊是完全跟隨省略號的。當省略號出現(xiàn)時，紅色小方塊必定消失，因為已經(jīng)被擠下去了，這里把父級 overflow: hidden 暫時隱藏就能看到是什么原理了

然后，可以把剛才這個紅色的小方塊設置一個足夠大的尺寸，并且降低透明度，比如 100% * 100%

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}

可以看到，紅色的塊塊把右下角的都覆蓋了，現(xiàn)在把背景改為白色（和父級同底色），父級 overflow: hidden 重新加上

.text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
}

現(xiàn)在看看點擊展開的效果吧

現(xiàn)在展開以后，發(fā)現(xiàn)按鈕不見（被剛才那個偽元素所覆蓋，并且也點擊不了），如果希望點擊以后仍然可見呢？添加一下 :checked 狀態(tài)即可，在展開時隱藏覆蓋層

.exp:checked+.text::after{
    visibility: hidden;
}

這樣，就實現(xiàn)了在文字較少的情況下隱藏展開按鈕的功能

最終完整代碼可以查看 codepen 多行展開收起自動隱藏，兼容版本可以查看 codepen 多行展開收起自動隱藏（全兼容）

需要注意的是，兼容版本可以支持到 IE 10+（這就過分了啊，居然還支持 IE），但是由于 IE 不支持 codepen，所以測試 IE 可以自行復制在本地測試。

四、總結和說明

總的來說，重點還是在布局方面，交互其實相對容易，整體實現(xiàn)的成本其實是很低的，也沒有比較生僻的屬性，除了布局方面 -webkit-box 貌似有點 bug （畢竟是-webkit-內核，火狐只是借鑒了過來，難免有些問題），幸運的是可以通過另一種方式實現(xiàn)多行文本截斷效果，兼容性相當不錯，基本上全兼容（IE10+），這里整理一下實現(xiàn)重點

文本環(huán)繞效果首先考慮 浮動 float
flex 布局子元素可以通過百分比計算高度
多行文本截斷還可以結合文本環(huán)繞效果用 max-height 模擬實現(xiàn)
狀態(tài)切換可以借助 checkbox
CSS 改變文本可以采用偽元素生成
多利用 CSS 遮擋“障眼法”

多行文本展開收起效果可以說是業(yè)界一個老大難的問題了，有很多 js 解決方案，但是感覺都不是很完美，希望這個全新思路的 CSS 解決方式能給各位帶來不一樣的啟發(fā)，感謝閱讀，歡迎點贊、收藏、轉發(fā)～

References

[1] vue-clamp: https://justineo.github.io/vue-clamp/demo/?lang=zh
[2] css-flexbox: https://www.w3.org/TR/css-flexbox-1/#algo-stretch
[3] codepen 右下角多行展開環(huán)繞效果: https://codepen.io/xboxyan/pen/ExWaBJO
[4] codepen 右下角多行展開環(huán)繞效果（全兼容）: https://codepen.io/xboxyan/pen/dyvYNxr
[5] codepen 多行展開收起交互: https://codepen.io/xboxyan/pen/XWMbJeQ
[6] codepen 多行展開收起交互（全兼容）: https://codepen.io/xboxyan/pen/OJpypmR
[7] CSS 奇技淫巧：動態(tài)高度過渡動畫: https://github.com/chokcoco/iCSS/issues/91
[8] codepen 多行展開收起自動隱藏: https://codepen.io/xboxyan/pen/eYvNvYK
[9] codepen 多行展開收起自動隱藏（全兼容）: https://codepen.io/xboxyan/pen/LYWpWzK

在線咨詢

上一篇：美國必須交出這些可疑的原始病例數(shù)據(jù)，讓中方徹查
下一篇：sonar代碼覆蓋率實戰(zhàn)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

多行文本控件(富文本框)怎樣自動填寫？

一、位于右下角的“展開收起”按鈕

二、“展開”和“收起”兩種狀態(tài)

三、文本行數(shù)的判斷

四、總結和說明

您的項目需求