帶有文本區域的 Javascript 通知框

Michael Zippo

HTML textarea 標籤用於在一個表單中創建多行文本輸入字段。它由 </code> 定義，可以包含無限數量的字符。</em></p><p>當您創建 HTML 表單時，您可能會決定要接受一長串文本。例如，如果您正在為零售商的網站創建客戶聯繫表單，您可以創建一個表單元素來接受客戶所面臨問題的詳細描述。</p><p>這裡是 HTML <code> <textarea></code> 出現。<code><textarea></code> 元素用於創建一個形狀元素，該元素提供編輯文本多行的功能。如果您想接受來自多個用戶的文本回复，此元素非常有用。</p><p>本教程將通過一些示例討論如何在您的 Alla 中使用 HTML <code><textarea></code>代碼。在本教程結束時，您將掌握使用 <code><textarea></code> 所需的所有知識！ pro</p><h2>HTML Textarea 標籤</h2><p><code><textarea></code> 用於在表單中定義多行文本輸入控製字段。 . <code><textarea></code>可以包含無限個字符</p><p><code><textarea></code>的語法如下：</p> <p>暫停下降了我們的代碼。 <code><textarea></code> 標籤用於在我們的 Web 表單中定義文本區域。與 <code><input></code> 不同，<code><textarea></code> 必須同時具有開始標籤 (<code><textarea></code>) 和結束標籤 (<code></ textarea > </代碼>）。這是因為文本框將顯示的默認文本包含在兩個</p><p>標籤之間。我們還在示例中指定了兩個屬性：</p> </div> </div> <ul><li><strong>lines </strong> 告訴瀏覽器該文本區域默認應該有多少行噸。換句話說，rows 屬性表示文本框的高度。</li><li><strong>Col。 </strong> 是默認情況下文本框應具有的列數。也就是說，Col.屬性表示文本框的寬度</li></ul> </a> </div> <p>假設我們為一個本地服裝店。此表單應該允許客戶對他們的購買發表評論。由於我們希望給用戶空間來提交詳細的評論，我們將使用 HTML <code><textarea></code> 來收集用戶評論。</p><p>我們可以使用以下代碼來創建評論表單：</p> <p>我們的代碼返回：</p><figure class = "wp-block image"> <img src = "h ttps: // LH6. googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N“ALT =”A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N“> </圖> <p>讓＆rsquo的; S打破我們的代碼首先，我們宣布<代碼> <FORM> </代碼>用於定義我們的在線表單。然後我們使用 <code><label></code> 向我們的頁面添加標籤，詢問用戶 <code>您對我們有什麼反饋？</code></p><p>所以，我們使用了一個<code><textarea></code>來創建返回表單，我們指定了四個屬性，分別是：</p><ul><li>rows is 5 and存儲該字段必須具有的行數</li><li>Col. 設置為 30 並存儲該字段應具有的列數。</li><li>id 是分配給表單的唯一標識符，在我們提交表單的時候會用到。</li><li>name也是用來標識表單的，是n如果我們想將表單提交到 Web 服務器，這是必需的。</li></ul> <p><code><textarea></code> 被所有主要瀏覽器支持。</p><p>示例上面是 <code><textarea></code> 的基本實現，但我們可以讓表單更高級。</p><p>讓我們繼續看兩個更高級的示例來說明如何使用 <code> ><textarea></code> 來創建文本框。</p><h3>最小和最大長度</h3> <p>以我們的服裝店為例假設我們要限製字符數ute nte 發送到 1000，以鼓勵用戶在撰寫評論時保持簡潔。我們還希望將最小字符限制設置為 10，以確保用戶以以下形式寫一些東西</p> </a> </div> <p>是 MINLENGTH 和 mAXLENGTH 屬性發揮作用的地方。minlength 用於指定用戶應寫入的最小字符數，而 maxlength 用於指定用戶可以在模塊中寫入的最大字符數。</p><p>這是我們之前定義了 minlength 和 maxlength 屬性的 web 模塊的示例：</p> <p>我們的返回表單：</p><figure class="wp-block image"> <img class="lazyload" data-src="https://lh3.googleusercontent .COM / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj <<如果模塊被認為是無效的，也有我們的模塊沒有字符。左“>這是要注意重要的是，即使用戶在我們的形式寫入少於10個字符，文本區域仍將被視為有效。如果我們想施加最小限制，我們必須指定所需的<code></code>。</p><h3>佔位符文本</h3> <p>在我們上面的web表單中，我們指定了裡面的默認文本我們的模塊。此文本表示 <code>您的評論在此處。 </code> 雖然此信息很有用，但如果用戶不想在表單響應中使用默認文本，則必須手動刪除。</p><p>如果要指定佔位符值，可以使用<code>佔位符</code>。該屬性表示表單為空時顯示的佔位符值。一旦用戶開始在框中輸入，佔位符就會消失。</p><p>這是一個包含佔位符文本的 <code><textarea></code> 示例<code>Your comments go here . </code>:</p> <p>我們的代碼返回：</p> <script> jQuery (document ) .ready (function () {jQuery (`# testimonial-section-1`).click (function (e) {var text = "找到你的訓練營比賽"; var type = "testimonial section"; var ahref = jQuery ( this) .attr (`href`); GaEvent (text, type, `fasttrack`); fasTrackEvent (type, text, ahref);}); function GaEvent (text, name, eventName) {var pathName = window.location.pathname.replace (/// g, ""); var referrer = document.referrer; referrer = referrer .replace("https://", ""); referrer = referrer.replace ("http://", ""); referrer = referrer.split (`/`) [0]; gtag (`event`, eventName, {cta_type: `fasttrack`, cta_name: name, cta_text: text, page_url: document.URL, page_path: pathName , referrer: referrer,});} function fasTrackEvent (type, text, ahref, fC TA = null) {var 文章 = jQuery (".thb-blockgrid")。父母（）。查找（“h2”）。文本（）; if (article == "") {var article = jQuery ("h1").文本（）; } analytics.track ("Blog - FastTrack CTA Clicked", {time: Date.now (), ctaType: type, ctaText: text, url: document.URL, article: article, category: jQuery (`.entry-header. single_category_title `) .text(), source: "blog", referrer: document.referrer, referrerDomain: document.referrer.split(`/`) [2]}); if (fCTA == null) {var fCTA = `testimonial-section`; } const firstFtCTA = localStorage.getItem (`firstFtCTA`); if (!firstFtCTA) {localStorage.setItem (`firstFtCTA`, fCTA); localStorage.setItem(`firstFtCTAPath`, document.URL); } localStorage.setItem (`lastFtCTA`, fCTA); localStorage.setItem(`lastFtCTAPath`, document.URL); analytics.identify ({... (firstFtCTA? {}: {firstFtCTA: localStorage.getItem (`firstFtCTA`), firstFtCTAPath: localStorage.getItem (`firstFtCTAPath`)}), lastFtCTA: fCTA, lastFtCTAPath}: document.URL, ); }}); </ SCRIPT> </ DIV> <類面=“WP-圖像塊”> <IMG SRC =“https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21”ALT =“7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </figure> <p>如您所見，文本 <code>Your comments 就在此處。 </code> 出現在文本框中。但是，當用戶開始輸入時，此文本會消失。我們知道此文本是一個佔位符，因為它是淺灰色的，而默認文本（如本文第一個示例所示）顯示為純黑色文本（除非另有說明）。</p> </a> </div> <h2>HTML文本框屬性</h2><p><code><textarea></code> 接受一組特定於標籤的屬性。在<code> <textarea> </code> 支持所有<a href=" /html-textarea/"> HTML中的全局屬性</a>。</p><p>下面是<code><textarea></code>支持的具體標籤屬性：</p><table類= "wp-block to table-info table"> <tbody > <tr> <td> <strong>屬性</strong> </td> <td> <strong>值</strong> </td> <td > <strong>description </strong> </td> </tr> <tr> <td> autofocus </td> <td> autofocus </td> <td> 表示當文檔的時候textarea是否應該是焦點已加載。</td> </tr> <tr> <td> Col. </td> <td> number </td> <td> 指定文本框默認顯示的文本行數。 </td> </tr> <tr> <td> disabled </td> <td> boolean </td> <td> 啟用文本框供用戶輸入。 </td> </tr> <tr> <td> 表單</td> <td> 模塊ID </td> <td> 文本框鏈接到模塊。 </td> </tr> <tr> <td> maxlength </td> <td> number </td> <td> 表示文本框接受的最大字符數。<br></td> < /tr> <tr> <td> minlength </td> <td> number </td> <td> 表示文本框接受的最小字符數。 </td> </tr> <tr> <td> 名稱</td> <td> 名稱</td> <td> 文本框的名稱。 </td> </tr> <tr> <td> placeholder </td> <td> text </td> <td> 提供當用戶開始在文本框中輸入時消失的佔位符文本。 </td> </tr> <tr> <td> readonly </td> <td> boolean </td> <td> 表示用戶不能修改textarea的內容。 </td> </tr> <tr> <td> 必需 </td> <td> boolean </td> <td> 表示用戶必須填寫表單。 </td> </tr> <tr> <td> rows </td> <td> number </td> <td> 表示文本框默認顯示的文本列數。 </td> </tr> </tbody> </table> <h2></h2><h2>結論</h2><p>HTML <code><textarea></code>是用來創建多行文本的輸入成員。如果您想收集多個用戶數據字符串，這些會很有用。</p><p>本教程參考示例討論瞭如何使用 <code><textarea></code> 創建文本框.本教程還提供了一個參考表，其中包含 <code><textarea></code> 提供的特定標記屬性。您現在可以像 HTML 專家一樣開始使用 <code><textarea></code>！</p>