jquery實現顯示textarea輸入字元數

来源:https://www.cnblogs.com/godbell/archive/2018/07/12/9302484.html
-Advertisement-
Play Games

起初會想到使用keyup、keydown、keypress或者是onchange事件,onchange需要失去焦點才觸發, 其它三個有些對按住鍵盤某個鍵不放不生效,有些對使用中文輸入法正在輸入時統計不正確。 網上找到一種方法就是綁定事件input propertychange 效果如下: ...


起初會想到使用keyup、keydown、keypress或者是onchange事件,onchange需要失去焦點才觸發, 其它三個有些對按住鍵盤某個鍵不放不生效,有些對使用中文輸入法正在輸入時統計不正確。

網上找到一種方法就是綁定事件input propertychange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <textarea></textarea>
    <div >當前已輸入<span id="count">0</span>個字元</div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $('textarea').bind('input propertychange',function(){
            $('#count').html($(this).val().length);
        });
    </script>
</body>
</html>

效果如下:


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 問題說明: activity中有個三級菜單,三個ListView嵌套,最後一層ListView的item中有EditText控制項。要求EditText不僅能手動輸入,還能點擊加減進行改變。EditText改變後各級目錄的得分情況要實時改變。 在EditText獲取焦點的時候點擊關閉二級目錄,或者在E ...
  • 解決項目中在string.xml 中顯示特殊符號的問題,如@號冒號等。只能考慮使用ASCII碼進行顯示: @號 &#064; :號 &#058; 空格 &#160; 以下為常見的ASCII十進位交換編碼: &#032;--> <-- 這邊是空格 &#033;-->!<-- &#034;-->"<-- ...
  • Android 雖然不是四大組件,但其並不比四大組件的地位低(涉及面的廣度和深入甚至比四大組件還複雜🔥)。而View的核心知識點“事件分發機制”則是不少剛入門同學的攔路虎(1、項目中處處遇到事件分發機制;2、面試管最喜歡提及的問題)。在實際項目的開發過程中,ScrollView 嵌套 Recycl ...
  • 定義:<?xml version="1.0" encoding="utf-8"?><resources> <string name="str1">Hello</string> <string name="str2" formatted="false"><![CDATA[值=(B-C)÷((C+D)) ...
  • SQLite中7(8)形參的query語句各形參的用法及簡單示例 ...
  • (__ bridge id) 是橋接,把非OC轉化為OC使用的; CoreAnimation 屬性: keyPath: 動畫屬性; anchorPoint: 錨點,圖層移動的把柄; 解釋:在一張紙的中央釘一個圖釘,紙可以繞著圖釘旋轉,這個圖釘就相當於是一個錨點,它的值是從 0 到 1 之間。 pos ...
  • # 學習目的 - 學會使用`DrawerLayout` - 學會使用`NavigationView` - 學會使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果 - 學會實現Toolbar在頂部以及Toolbar被遮擋的兩種效果 ...
  • 前戲 到目前為止,我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法,並沒有和瀏覽器有任何交互。 也就是我們還不能製作一些我們經常看到的網頁的一些交互,我們需要繼續學習BOM和DOM相關知識。 JavaScript分為 ECMAScript,DOM,BOM。 BOM(Browse ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...