实现效果:

1、文本框输入内容,低端字数对应减少

2、当文本框内容超出时,会显示字数超出多少

效果图如下:

实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#aa{
height: 150px;
width: 300px;
border: 1px solid grey;
}
#ff{
color: red;
}
</style>
</head>
<body>
<textarea id="aa" onkeyup="doinput(this)">

</textarea><br />
还可以输入<span id="dd" >140</span>个字
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span id="ff"></span>
</body>
</html>
<script language="javascript">
function doinput(txt)
{
var s = txt.value; //读取文本框内容
var n = s.length; //读取文本框内容的长度
var shengyu = 140-n; //140-去内容长度
if(shengyu>=0){
document.getElementById("dd").innerHTML = shengyu;
}
else{

document.getElementById("ff").innerHTML = "字数超出"+shengyu;
}
}
</script>

js写发布微博文本框---2017-04-14的更多相关文章

  1. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  2. C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

  3. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  4. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  5. JS轻松实现单击文本框弹出选择日期

    我的开发工具是vs2005,你们可选择自己合适的开发工具 首先创建个文本框<input id="txFDate" name="txFDate" type= ...

  6. [JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值

    在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦 可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能 下面以asp.net代 ...

  7. JS控制输入框和文本框字数

    文本框限制字数: HTML结构: JS: $('.advert-title').each(function(){ var TXTlength = $(this).text().length; // 当 ...

  8. 自己写的 限制文本框TEdit中只能输入数字

    procedure TForm4.Edit1KeyPress(Sender: TObject; var Key: Char); begin , #]) then begin Key := #; end ...

  9. 在EXT框架中,使用JS文件设置UEditor文本框,出现新增内容很多,页面变型,不出现滚动条,导致无法进行操作。

    找到UEditor的配置文件:ueditor.config.js(这是我的项目的UEditor的配置文件名) 找到参数设置 autoHeightEnabled 是否自动增长参数,默认为TRUE 当默认 ...

随机推荐

  1. mysql简单语句

    创建名为user的数据库: create database user; 显示所有数据库: show databases; 选择名为user的数据库: use user; 显示所有表: show tab ...

  2. UWP 协议启动

    1.创建通过协议启动的项目 AppDemo 2.在项目的Package.appxmanifest 文件里 Extensions 目录下 <Extensions> <uap:Exten ...

  3. vue2 阻止时间冒泡

    click.stop.prevent <div class="content-right" @click.stop.prevent="pay" > ...

  4. C++文本操作.Vs.Python

    C++利用文件流: (1):读取一个字符 std::string TestTxt(argv[3]); // freopen(TestTxt.c_str(),"r",stdin);/ ...

  5. Win7系统下调整硬盘分区大小给C盘更多的空间

    电脑安装了很多程序,C盘空间越来越小了.如何给C盘调整更多的空间,其实只要调整硬盘分区大小便可解决这个问题,下面有个小技巧,需要的朋友照做就可以了 Win7系统下如何调整硬盘分区大小,以前装系统的时候 ...

  6. 企业级任务调度框架Quartz(1) --企业应用中的任务调度介绍

    由于目前的工作内容为建行CLPM批处理业务的设计工作,所以很好的理解批处理所用的任务调度框架Quartz势在必行:为了能够更好的去服务于工作,也 为了提升自己,所以我学习了Quartz Job Sch ...

  7. python编写简单的html登陆页面(2)

    1  在python编写简单的html登陆页面(1)的基础上在延伸一下: 可以将动态分配数据,实现页面跳转功能: 2  跳转到新的页面:return render_template('home1.ht ...

  8. RabbitMQ基础知识(转载)

    RabbitMQ基础知识(转载) 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需 ...

  9. shell问题-报错即退出

    如下: #!/bin/bash set -o errexit 在最开头加上 set -o errexit 即可(或者 set -e) 要关闭的时候 set +o errexit        (或者 ...

  10. Linux进程地址管理之mm_struct

    FROM : http://www.cnblogs.com/Rofael/archive/2013/04/13/3019153.html Linux对于内存的管理涉及到非常多的方面,这篇文章首先从对进 ...