通过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. 修改VNC的分辨率

    http://blog.csdn.net/jlds123/article/details/9064437 有时候用VNC View打开远程linux桌面时,桌面显示不出来,只有一个灰色背景加上一个命令 ...

  2. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  3. while 常见程序逻辑

    1. 查找 List L; Position P = L; while (P && P->Element != Key) { P = P->Next; } return P ...

  4. C++ 快速入门笔记:进阶编程

    C++入门笔记:高级编程 文件和流 打开文件 void open (const char *filename, ios::openmode mode); ios::app 追加模式.所有写入都追加到文 ...

  5. gcc for Windows 开发环境介绍

    导读: 在Windows操作系统下的gcc 第一节 GCC家族概览 GCC是一个原本用于Unix-like系统下编程的编译器. 只是,如今GCC也有了很多Win32下的移植版本号.所以,或许对于很多W ...

  6. 【9309】求Y=X1/3

    Time Limit: 1 second Memory Limit: 2 MB 问题描述 求Y=X1/3次方的值.X由键盘输入(x不等于0,在整型范围内).利用下列迭代公式计算: yn + 1=2/3 ...

  7. Erlang 杂记

    学习Erlang的时候在书的留白处随手记录了一些东西,还有一些记录在了demo的注释里面,今天抽时间整理出来了一部分,分享一下. Erlang的设计哲学是为每一个独立的事件创建一个新进程. Erlan ...

  8. sqoop 1.4.7 安装配置/连接测试

    环境: hadoop2.7.7 mysql 8 zk 3.4.10 hive 3 1.上传并解压tar包后进入conf目录 拷贝sqoop-env-template.sh并重命名为sqoop-env. ...

  9. 理解React生命周期的好例子

    class App extends React.Component { static propTypes = { }; static defaultProps = { }; constructor(p ...

  10. 哪个项目管理工具好用到哭?JIRA VS 华为软件开发云

    一.产品介绍 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. 华为软件开发云 (DevCloud ...