js監控輸入框變化（input propertychange change）

阿新 • • 發佈：2019-01-12

今天做網頁要用到監聽輸入框變化，找到了幾種不同方案，做一下記錄，以下示例可直接貼上到html檔案在本地執行預覽。

方法一：

<!DOCTYPE html>
<html>
<head>
<title> js監控輸入框變化</title>
<script type="text/javascript">
  var oshow=document.getElementById("show");
  var count=0;
  $("#txt").bind("input propertychange change",function(event){
      count=count+1;
      oshow.innerHTML=count;
  });
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="ssh"/>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head>
<title>js監控輸入框變化</title>
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  var oshow=document.getElementById("show");
  var count=0;
  if(document.all){
     otxt.onpropertychange=function(){
       count=count+1;
       oshow.innerHTML=count;
     }
  }
  else{
    otxt.oninput=function(){
      count=count+1;
      oshow.innerHTML=count;
    }
  }
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="ssh"/>
</body>
</html>

方法三：
當方法二有衝突時可以用此方法解決。

<!DOCTYPE html>
<html>
<head>
<title> js監控輸入框變化</title>
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  var oshow=document.getElementById("show");
  var count=0;
  if(document.all){
     otxt.onpropertychange=function(){
       count=count+1;
       oshow.innerHTML=count;
     }
  }
  else{
    otxt.oninput=function(){
      count=count+1;
      oshow.innerHTML=count;
    }
  }
}


function _addLoadEvent(func)
{
    var oldonload=window.onload;
    if(typeof window.onload != 'function')
    {
        window.onload=func;
    }
    else
    {
       oldonload();
       func();
    }
}
_addLoadEvent(spring_x);


function spring_x(){   
  var otxt=document.getElementById("txt");
  var oshow=document.getElementById("show");
  var count=0;
  if(document.all){
     otxt.onpropertychange=function(){
       count=count+1;
       oshow.innerHTML=count;
     }
  }
  else{
    otxt.oninput=function(){
      count=count+1;
      oshow.innerHTML=count;
    }
  }
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="ssh"/>
</body>
</html>

js監控輸入框變化（input propertychange change）

今天做網頁要用到監聽輸入框變化，找到了幾種不同方案，做一下記錄，以下示例可直接貼上到html檔案在本地執行預覽。方法一： <!DOCTYPE html> <html> &l

實時監聽input輸入的變化（相容主流瀏覽器）

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

NGUI的輸入框的校驗（input filed script）

component inf 添加 tco 輸入框 body .com wake wak 一，我們制作一個輸入框，右鍵添加Sprite ，給Sprite添加一個child的label，然後給Sprite添加一個box collider,接著添加input filed scri

用js使得輸入框input只能輸入數字等

覺得很好用就收藏了 JS判斷只能是數字和小數點 1.文字框只能輸入數字程式碼(小數點也不能輸入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=th

input輸入框限制（座機，手機號碼）

記錄一下座機input輸入框： <input style="width:100px;" id="tel" type="text" onkeyup="value=value.replace(/[^\d\-\d]/g,'')" maxlength=20></input>

google等webkit瀏覽器下，設定input輸入框自動（選擇）填充的字型顏色

場景：讓input的字型為白色、背景色為#40a6f5、去除預設的邊界、陰影 input:-webkit-autofill,select:-webkit-autofill { -webk

自制樣式美觀的input元件（以search輸入框為例，含原始碼）

閱讀本文前，讀者需要有一定的html + css的技術功底。不說廢話，先附上search輸入框的成果截圖：分析： 1. 元件分解：分解為如下幾個部分： 1）外層：增加一個容器，如div 2）內層：一個input輸入框一個按鈕 2. 設定樣式： 1）容器樣式增加b

關於js文字輸入框輸入數字進行比較的經驗

今天專案中出了一個bug,讓我來修正. 問題:在一個有24570頁碼的列表頁面,輸入下方跳轉頁碼時出現一個問題,在25-99,246-999,2458-9999之間的頁碼都不能輸入跳轉. 解決: 在Myeclipse中serach了那個跳轉頁面的js語句,沒找到,之後找了好久好久,框

js控制輸入框只能輸入數字不能輸入其他字元

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"

JS——圖片處理（input type='file'）演練

今天我們就玩一下怎麼在我們的網頁中像更改頭像一樣更換圖片效果圖如下：當點選左邊的圖片，就彈出選擇框，可以選擇想要的圖片將原圖替換，是不是很實用，接下來就看看怎麼實現的吧 1、body部分 <body> <div id="divimg"&g

JS實現輸入框類似百度搜索的智慧提示效果

1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

詳細實現微信輸入框效果（textView自適應文字高度）

前言最近會不斷推出一些輪子，這次寫了一個控制元件，類似微信輸入框，評論View,隨著文字增加，textView自增長高度，如果喜歡我的文章，可以關注我微博:吖了個崢,也可以來小碼哥，瞭解下我們的iOS培訓課程。後續還會更新更多內容,有任何問題，歡迎簡書留言崢吖。。。 Dem

bootstrap輸入框組（13）

向 .form-control 新增字首或字尾元素的步驟如下：把字首或字尾元素放在一個帶有 class .input-group 的 <div> 中。接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <spa

js 限制輸入框的位元組數，中文兩個位元組，英文字母一個位元組

也許在網上有很多類似的文章，但是這裡大家應該知道，js裡面，中文和字母的長度都是1，但是資料庫不知道呀，資料庫很多都是按照位元組來的，所以，控制輸入框的位元組數看來比長度限制更為重要。提出問題： 1、限制文字框為16個位元組，只能輸入中文和字母解決思路： 1、判斷只能是

jquery無重新整理新增和刪除input輸入框增加減少input框

<pre name="code" class="html"><a href="#" id="AddMoreFileBox" class="btn btn-info">新增更多的input輸入框</a></span></p

JS 對輸入框進行限制(常用的都有)

文章來源 http://www.soso.io/article/24096.html 1.文字框只能輸入數字程式碼(小數點也不能輸入) 程式碼如下: <input onkeyup="this.value=this.value.replace(/\D

JS判斷輸入字串長度（漢字算兩個字元，字母數字算一個）

<html> <head> <title>js判斷輸入字串長度（漢字算兩個字元，字母數字算一個）</title> <style type="text/css"> .pbt { margin-b

JS驗證輸入框格式

$("#f_sys_name").bind('input porpertychange',function() { //驗證輸入框不能為中文（英文字母和數字）if($("#errText").length>0)$("#errText").rem

JS判斷輸入框是否什麼都沒輸入

isNoInput = (value) => { return String(value).replace(/(^\s*)|(\s*$)/g, '') === '' } 原理：使用正則去掉傳入

js判斷輸入框是否為空，為空格，為回車

js-判斷輸入框是否全為回車、空格或為空 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/htm

js監控輸入框變化（input propertychange change）

相關推薦