JS实时检测文本框内容长度

通过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,且会涉及到光标位置的问题,下篇文章会写到光标定位。

时间: 2024-10-19 10:21:22

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

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

   oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur):    onpropertychange的话,仅仅要当前对象属性发生改变,都会触发事件,可是它是IE专属的: oninput是onpropertychange的非IE浏览器版本号,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并不是该对象全部

js获取input文本框内容问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><td><input type="text" name="username" placeholder="请输入用户名&

html5 canvas+原生javascript 实时获取文本框内容绘制图片水印

最近有位客户要求在网页图片上加文字水印效果,并且内容是从当前网页的文本输入框实时获取的,研究了一半天,在网上也参考了不少朋友的办法,再加上园子里热心的好哥们帮助终于实现了,先看下效果图: 代码如下: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>drawing by input text</title> 5 </head> 6 7 <

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

例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&

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

$.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', function() { var id = $(this).attr("id"); var maxContent=200; var strlen = 0; //初始定义长度为0 var txtval = $('#'+id).val().trim(); for (var i = 0; i <txtv

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

js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 例如:$("#"+defaultPVItemId).children().eq(3).find('input').val('当前位置'); //修改某个选择器下的第四个子节点的input节点的输入框文本内容 js修改属性内容: attr():该方法一般是获取某个属性值,或者修改某个属性值,

用js实现保存文本框信息

看知乎等大型网站都实现自动保存文本框内容,我就用js简单地实现这个功能,用到了onblur事件跟onload事件,保存到本地cookie(为减轻服务器负担,一般人都不加用session来做吧?) <body > <script type="text/javascript"> function savecontent() { var kk=""; var content=document.getElementById("text&qu

通过js动态生成文本框,怎么把文本框中的值传到java后台?

通过js动态生成文本框,怎么把文本框中的值传到java后台? 1 var lengths; 2 function insertrow2() //增加的一行方法2 3 { 4 newRow=document.all.yltable.insertRow(-1); 5 lengths = document.all.yltable.rows.length; 6 7 newcell=newRow.insertCell() ; 8 newRow.bgColor='#FFFFFF'; 9 newcell.al

VB.NET-轻松判断文本框是否为空,一键清空文本框内容

房收费系统的时候,令人相当恶心的一件事就是判断文本框和组合框是否为空还有清空文本框.基本上每个窗体都要进行判断,那一个接着一个的If...Else...语句,长长一串,看着就头疼,但是第一次做机房收费系统的时候竟然傻傻的一个不落都写了出来.真佩服当时的自己,不过这一次还是不要在做那种傻事了,因为我们经历了不少面向对象的洗礼,认识了封装. 向对象的范畴里,对于相同的或者类似的代码只要重复3次以上我们应该想到面向对象的三大特性之一:封装.想是想到了但是具体怎么通过封装来简化繁琐的判断任务呢? 1.