1. 程式人生 > >textarea輸入框監聽和輸入字數限制

textarea輸入框監聽和輸入字數限制

html

<textarea class="wishContent" placeholder="請輸入不超過15個字" maxlength="15">
</textarea>
<span class="wordsNum">0/15</span>

js:

//封裝一個限制字數方法
var checkStrLengths = function (str, maxLength) {
    var maxLength = maxLength;
    var result = 0;
    if (str && str.length > maxLength) {
        result = maxLength;
    } else
{ result = str.length; } return result; } //監聽輸入 $(".wishContent").on('input propertychange', function () { //獲取輸入內容 var userDesc = $(this).val(); //判斷字數 var len; if (userDesc) { len = checkStrLengths(userDesc, 15); } else { len = 0 } //顯示字數
$(".wordsNum").html(len + '/15'); });

效果圖:
這裡寫圖片描述

相關推薦

移動端textarea輸入輸入字數限制(相容iosAndroid)

html <div class="textareaBox"> <textarea class="wishContent" placeholder="請輸入不超過15個字" maxlength="15"></te

textarea輸入輸入字數限制

html <textarea class="wishContent" placeholder="請輸入不超過15個字" maxlength="15"> </textarea>

element ui輸入enter回車事件

<el-form-item>    <el-button type="primary" @keyup.enter.native="onSubmit">登陸</el-button>    <el-button @click="reset

Js(Jquery)實時input輸入值的變化

效果圖 Js寫法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&

如何實時input輸入裡的字元是否合法

問題:     input裡面只允許輸入字母與數字, 一旦出現其他符號, 進行報錯 準備解決:     jquery,  基本思路:     每當按鍵擡起時(keyUp事件), 就會進行字串匹配, 如果錯誤, 進行錯誤提示(這裡為了演示用alert 進行提示, 讀者

Js/jQuery實時input輸入值變化

前言 在做web開發時候很多時候都需要即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。而採用onchange時間又往往是在輸入框失去焦點(onblur)時候觸發,有時候並不能滿足條件。 首先看一下dom中元素事件: onpr

H5:實時 input 輸入的值變化

(1)jquery:只需要同時繫結 oninput 和 onpropertychange 兩個事件就可以了。 $('#input').bind('input propertychange', function() {        alert("我是實時監聽哦")

EditText輸入輸入內容的變化

輸入框在開發中是一個很常見的控制元件,可能很多時候我們不僅僅是用來簡單的用它來輸入內容這麼簡單,有時候可能還需要拿到甚至是監聽輸入框裡面的內容,然後作出一個合理的邏輯判斷,對EditText監聽安卓系統提供了TextWatcher來監聽輸入框裡面內容的變化情況。示例如下

實時input輸入value的變化:

arch 綁定 -c ear rip cell color border type HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件實時監聽輸入框value的變化 oninput 事件在用戶輸入時觸發。 該事件在 <in

完整版文字即時輸入資料並下拉顯示匹配資料

1.前言 好多小童鞋,對以jq為主的前端並不是特別熟悉,但並不代表你是菜鳥,說不定你是其他方面的資深老司機,好吧,我才是菜鳥,今天主要寫一個完整的demo來看看怎樣文字框+下拉框即時匹配資料。 2.

實時input輸入值的變化例項

1、在元素上同時繫結 oninput 和onporpertychanger事件 <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script>

使用yield生成器,用Python實現用戶對用戶輸入信息的過濾

所有 file line adl 語句 pytho open UNC 函數 # -*- coding:utf-8 -*-‘‘‘‘‘‘‘‘‘生成器是一次生成一個值的特殊類型函數。可以將其視為可恢復函數。調用該函數將返回一個可用於生成連續 x 值的生成【Generator】,簡

微信小程序input輸入並取值

col com 9.png log color 程序 html console pos 小程序的事件分為兩種,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scrol

python 使用生成器 來完成 檔案輸入的例子

def tail(filename):#函式 f = open(filename,encoding='utf-8') while True: line = f.readline() if line.strip(): yield line.strip() g = tail('file')#引用 設定檔

微信小程式開發中textarea文字域字數限制與動態計算

微信小程式開發時常會有評論或者備註功能,都會用到文字域字元長度計算以及字元限制的功能,筆者把最簡潔易用的案例分享出來。學習之前先看微信官方API文件 https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html

實時input輸入的變化(相容主流瀏覽器)

【轉載】監聽輸入框的值,一般通過onchange/onkeyup/onkeypress/onkeydown實現,但是這存在著一些不好的使用者體驗。比如onchange事件只在鍵盤或者滑鼠操作改變物件

實時input輸入內容的N種方法

現在有一個需求,需要我們實時監聽input輸入框中的內容,從而帶來更好的使用者體驗,而不是等我們全部輸入完畢才告訴我們格式不對 首先我們建立一個input輸入框 <form name='loginForm'> &l

Android 自定義鍵盤輸入內容

 文章內容結構按照STAR法則展開的:   situation:                   為何要監聽輸入內容? 一般正常的監聽鍵盤輸入內容,都是用Editext控制元件來實現使用者的輸入

Swing JTextField實時鍵盤輸入內容

JTextField想要實時監聽鍵盤輸入內容必須實現DocumentListener介面 如圖:實現介面後會有這三個方法: implements DocumentListener 下面我們來看一下API中的介紹: 在API中可以看出 inse

Vue檔案中input輸入事件v-on:input

原文地址:http://blog.csdn.net/JaneLittle/article/details/72742225 oninput 事件在使用者輸入時觸發,菜鳥教程中的用法是: 但是在.vue中這樣寫是沒有作用的: <input type="t