编程 Javascript

Input文本框随着输入内容多少自动延伸的实现

Posted in Javascript onFebruary 15, 2017

实例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script language="javascript"> 
function checkLength(which) { 
  var oTextCount = document.getElementById("char");  
  iCount = which.value.replace(/[^/u0000-/u00ff]/g,"aa"); 
  oTextCount.innerHTML = "<font color=#FF0000>"+ iCount.length+"</font>"; 
  which.style.border = '1px dotted #FF0000'; 
which.size=iCount.length+2; 
} 
 </script> 
</head> 
<body> 
<input name="words" size="2"  onkeyup="checkLength(this)"/> 
  <span id="char">0</span>个字符 
</body> 
</html>

以上这篇Input文本框随着输入内容多少自动延伸的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

保证JavaScript和Asp、Php等后端程序间传值编码统一

Apr 17 Javascript

js获取RadioButtonList的Value/Text及选中值等信息实现代码

Mar 05 Javascript

javascript中match函数的用法小结

Feb 08 Javascript

js改变透明度实现轮播图的算法

Aug 24 Javascript

基于Marquee.js插件实现的跑马灯效果示例

Jan 25 Javascript

详解在Angular项目中添加插件ng-bootstrap

Jul 04 Javascript

react-native组件中NavigatorIOS和ListView结合使用的方法

Sep 30 Javascript

AngularJS 表单验证手机号的实例(非必填)

Nov 12 Javascript

详解keep-alive + vuex 让缓存的页面灵活起来

Apr 19 Javascript

JQuery常见节点操作实例分析

May 15 jQuery

浅谈vue3中effect与computed的亲密关系

Oct 10 Javascript

Vue混入mixins滚动触底的方法

Nov 22 Javascript

利用Jquery实现几款漂亮实用的时间轴(附示例代码)

Feb 15 #Javascript

js记录点击某个按钮的次数-刷新次数为初始状态的实例

Feb 15 #Javascript

Canvas 绘制粒子动画背景

Feb 15 #Javascript

jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

Feb 15 #Javascript

js控制按钮,防止频繁点击响应的实例

Feb 15 #Javascript

js代码延迟一定时间后执行一个函数的实例

Feb 15 #Javascript

图文详解Javascript中的上下文和作用域

Feb 15 #Javascript

You might like

PHP 显示客户端IP与服务器IP的代码

2010/10/12 PHP

php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法

2011/11/26 PHP

PHP发送AT指令实例代码

2016/05/26 PHP

Laravel中日期时间处理包Carbon的简单使用

2017/09/21 PHP

PHP+redis实现的购物车单例类示例

2019/02/02 PHP

浅析PHP7 的垃圾回收机制

2019/09/06 PHP

javascript下查找父节点的简单方法

2007/08/13 Javascript

js中widow.open()方法使用详解

2013/07/30 Javascript

Jquery 复选框取值兼容FF和IE8(测试有效)

2013/10/29 Javascript

jquery选择器之内容过滤选择器详解

2014/01/27 Javascript

javascript的push使用指南

2014/12/05 Javascript

jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例

2017/01/30 Javascript

Vue 仿百度搜索功能实现代码

2017/02/16 Javascript

Easyui Datagrid自定义按钮列(最后面的操作列)

2017/07/13 Javascript

JavaScript之事件委托实例(附原生js和jQuery代码)

2017/07/22 jQuery

Angularjs的键盘事件的绑定

2017/07/27 Javascript

jQuery ajax调用webservice注意事项

2017/10/08 jQuery

通过javascript实现段落的收缩与展开

2019/06/26 Javascript

浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

2019/10/23 Javascript

JavaScript监听一个DOM元素大小变化

2020/04/26 Javascript

使用Taro实现小程序商城的购物车功能模块的实例代码

2020/06/05 Javascript

vue3.0 上手体验

2020/09/21 Javascript

Python实现给qq邮箱发送邮件的方法

2015/05/28 Python

人工智能最火编程语言 Python大战Java!

2017/11/13 Python

详解python 注释、变量、类型

2018/08/10 Python

python适合人工智能的理由和优势

2019/06/28 Python

Python pandas自定义函数的使用方法示例

2019/11/20 Python

pycharm设置python文件模板信息过程图解

2020/03/10 Python

matlab、python中矩阵的互相导入导出方式

2020/06/01 Python

对python pandas中 inplace 参数的理解

2020/06/27 Python

canvas画布实现手写签名效果的示例代码

2019/04/23 HTML / CSS

英国最大的笔记本电脑直销专家：Laptops Direct

2019/07/20 全球购物

党的群众路线教育实践活动心得体会900字

2014/03/07 职场文书

团支部建设方案

2014/05/02 职场文书

知识就是力量演讲稿

2014/09/13 职场文书

给校长的建议书作文300字

2015/09/14 职场文书