本單元特色:渲染textarea & 文字被聊天氣泡外框包覆 & 避免輸出文字後,游標於第二列進行閃爍 方框填入文字後: 1.鍵盤按下迴車Enter回車鍵 2.按下[傳出]按鈕 被氣泡外框包覆的文字會呈現於屏幕上,並且: ●方框中的信息會被清空 ●傳出文字後,方框中依舊仍存在閃爍的游標<br> -------------------------------------------------------------------------------------------- 可嘗試輸入: Tsair<b>Daddy<b>and<mark>alice</mark> is <h1>MOM</h1>love<br>family 或 good<br>perfect 或 1 2 3 4 5 6 7<br>七的右邊有三個空格 ^查看輸出後被打印的狀態是否可完整重現多個空格。若有多個空格,本單元僅能呈現一個空格 或 輸入:1~>按Enter~>輸入:2~>按Enter~>輸入:3~>按Enter~>輸入:4~>按Enter ^觀看是否可換行 ------------------------------------------------------------------------------------------ **** 按下Shift+Enter時會換行、但不傳出文字: 1.輸入: 鍵入A~>Shift+Enter(換行但不傳出文字)~> 鍵入B~>Shift+Enter(換行但不傳出文字)~> 鍵入C~>Shift+Enter(換行但不傳出文字)~> 鍵入D~>Shift+Enter(換行但不傳出文字)~> 2.藉由滑鼠游標點擊sendclick2按鈕(不是鍵入Enter傳出文字) 3.藉由滑鼠游標點擊sendclick2按鈕 來傳出文字後,閃爍游標會於第1列閃爍(而不是於第2列閃爍) ^即便尚未藉由e.preventDefault();此特殊寫法,來避免文字被傳出後、游標於第二列進行閃爍。 只要採用滑鼠游標點擊按鈕的方式,即可使得文字在傳出後,游標會於第1列閃爍(而不是於第2列閃爍) //// 滑鼠游標點擊sendclick2按鈕,會直接執行傳出文字之方程式,而不會經歷e.preventDefault();此特殊寫法,來避免文字被傳出後、游標於第二列進行閃爍。 然而即便不會經歷e.preventDefault();此特殊寫法,滑鼠游標點擊sendclick2按鈕並不是鍵入Enter傳出文字,故此不會因鍵入Enter,而造成游標於第二列進行閃爍的情形。 ------------------------------------------------------------------------------------------ **** 按下Shift+Enter時會換行、但不傳出文字: 1.輸入: 鍵入A~>Shift+Enter(換行但不傳出文字)~> 鍵入B~>Shift+Enter(換行但不傳出文字)~> 鍵入C~>Shift+Enter(換行但不傳出文字)~> 鍵入D~>Shift+Enter(換行但不傳出文字)~> 2.鍵入Enter傳出文字(不是藉由滑鼠游標點擊sendclick2按鈕) 3.鍵入Enter傳出文字後,閃爍游標會於第2列閃爍(而不是於第1列閃爍) ★本範例並非PHP資料庫,但有藉由e.preventDefault();此特殊寫法,來避免文字被傳出後、游標於第二列進行閃爍。 因此按下Enter後,會恢復為僅剩一列、並且游標會於此僅存的一列進行閃爍。 ------------------------------------------------------------------------------------------ 可鍵入超級無敵長之連續字串,譬如: willy is boy willy is boy willy is boy willy is boy willy is boy willy is boy willy is boy 0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHiJKLMNOPQRSTUVWXYZ ^藉此觀看氣泡外框內之文字為靠左隊旗,即便於CSS中藉由#ChatBubbleAlignRight將整體氣泡靠右對其,氣泡內部的文字依舊靠左對其。

---------------------------------------------------------------------------- ★本單元主打超重要:每送出一次文字,該次輸出會具有一個獨立的氣泡聊天包住文字;送出兩次文字,則會有兩個獨立的氣泡聊天包住文字。藉由append法呈現純文字、無法換行、無法自動轉成HTML做工程式碼,針對同一ID來.append(document.createElement('br'))換行: