通过js代码实时监测,文本框内容的变化以及长度,下图是一个实际使用场景。

  

HTML部分:

  1. <input id="Text1" type="text" onkeyup="TmaxLength(this)"/>
  2. <span id="Counter" style="color: red;">0</span>

JS部分

  //实时更新输入框文字长度
  function TmaxLength(x) {
    //x.getAttribute是判断是否为DOM结构
    var nMaxLen = x.getAttribute ? parseInt(x.getAttribute("maxlength")) : "";
    if (x.getAttribute && x.value.length > nMaxLen) {
    x.value = x.value.substring(0, nMaxLen);
  }
    document.getElementById("Counter").innerHTML = x.value.length;
  }

  *注意:对于可编辑div的话,不能用value属性,改为innerText,且会涉及到光标位置的问题,下篇文章会写到光标定位。

JS实时检测文本框内容长度的更多相关文章

  1. 通过js实时检测文本框内容

    思路 1,在获取文本框焦点后,启动定时器,每隔100毫秒来查看文本内容的改变 2,在文本框失去焦点后,清除定时器 下面是一个简单的例子 <!DOCTYPE html> <html&g ...

  2. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  3. JS来推断文本框内容改变事件

       oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...

  4. JS、JQury - 文本框内容改变事件

    例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  5. js 实时计算文本框字数限制

    $.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...

  6. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  8. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  9. JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

随机推荐

  1. Spring mvc redirect跳转路径问题

    SpringMVC重定向视图RedirectView小分析 前言 SpringMVC是目前主流的Web MVC框架之一. 本文所讲的部分内容跟SpringMVC的视图机制有关,SpringMVC的视图 ...

  2. URL传递中文参数,大坑一枚,Windows与Linux效果竟然不一致(两种解决方法)

    下午,计划2个小时搞定,个人官网第6次升级,就可以干点轻松的事了,结果,下午多搞了2个小时,晚上又搞了2个小时,才搞定. 最后一个世界难题是,URL传递中文参数. 问题大致是这么出现的:我为" ...

  3. Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下)

    原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下) 接着上篇... 接下去,将一步步演示如果创建当点击checkBox后,其中的按钮由左边滑动到右边,表示处于 ...

  4. 常用Java开发工具类

    common: LruLinkedHashMap:一个支持Lru算法的LinkedHashMap. 源码地址:点击打开链接 MD5:MD5工具类 源码地址:点击打开链接 Slicer:可以将List切 ...

  5. Android网络应用之Socket(一)

    socket编程是网络通信的一个基础应用.不管是手机端还是PC端都须要socket技术来建立网络通信. 在本章小编主要从下面几个方面来介绍socket的相关知识: 各自是"什么是socket ...

  6. Android四大组件之Activity--管理方式

    1. 概览 Activity的管理有静态和动态两层涵义: 静态是指Activity的代码组织结构,即Application中声明的Activity的集合,这些Activity被组织在一个APK中,有特 ...

  7. 电子商务系统的设计与实现(七):前后端系统UI设计的一些思考

    对于大部分开发者来说,写界面是最烦人的事.我想,开发者最初诞生,以及我们在大学学习的时候,更加侧重的是程序设计和逻辑思维,而不是界面.界面更象是艺术,艺术和程序设计是两回事. 我个人还是想成为全栈式开 ...

  8. VS Code插件之Cordova Tools

    原文:VS Code插件之Cordova Tools 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011127019/article/detai ...

  9. 10g RAC 采用service达到taf

    service由于oracle数据库中的一个关键概念,利用得当,可以轻松地管理数据库,提高数据库的工作效率. 经service.oracle可以实现server side  taf,简单化client ...

  10. .NET 即时通信,WebSocket

    .NET 即时通信,WebSocket 即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s ...