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

实例如下：

<!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文本框随着输入内容多少自动延伸的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现文本框宽度自适应文本宽度的方法

    js实现文本框宽度自适应文本宽度的方法

    本文实例讲述了js实现文本框宽度自适应文本宽度的方法.分享给大家供大家参考.具体如下: 一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长. 运行效果如下图所示: 具体代码如下: <!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> <html

  • 文本框input聚焦失焦样式实现代码

    首先用css的伪类:focus可以改变. 文本框的 html代码假设如下: 复制代码 代码如下: <dl> <dt>Name: <dt> <dd><input type="text" /></dd> <dt>Password: <dt> <dd><input type="password" /></dd> <dt>Texta

  • 文本框(input)获取焦点(onfocus)时样式改变的示例代码

    摘要:许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了. 许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果.其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可.本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他

  • jQuery文本框(input textare)事件绑定方法教程

    目前1.7以上,jquery​的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法:bind 一个事件,一个方法:$(".class input").bind('click',function(e)

  • jQuery简单实现input文本框内灰色提示文本效果的方法

    本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun

  • input文本框样式代码实例

    通过css来更改所有的form的样式的方法,可以在css中定义input{color:red}textarea{border:1px solid #333}这样的格式,一般如果不需要更改所有的文本样式,可以通过下面的方法来定义文本框和密码框等样式 新建网页 1 用户名: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 捕获input文本框内容改变事件的js代码

    网上一位老兄采用如此方法: readonly :是文本框不可输入. function dochg(){ document.getElementById("testId").value = "test" } setTimeout("dochg()",1000) function showValue(obj){ alert("changed value is " + obj); } [Ctrl+A 全选 注:如需引入外部Js需刷新

  • JS获取及设置TextArea或input文本框选择文本位置的方法

    本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR

  • JS input文本框禁用右键和复制粘贴功能的代码

    复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume

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

    实例如下: <!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="Co

  • 文本框根据输入内容自适应高度的代码

    其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中. 源代码: 23:03文章更新: 感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器! 在线演示: http://demo.jb51.net/js/2011/autoArea/index.htmautoTextarea.js 复制代码 代

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • js限制文本框的输入内容代码分享（3类）

    js限制文本框的输入内容代码分享（3类）

    为大家分享的JavaScript限制文本框的输入内容代码如下 <style type="text/css"> <!-- .STYLE1 { color: #0099FF; font-weight: bold; font-size: x-large; } --> </style> <p> </p> <p> </p> <p> </p> <p> </p> <

  • 在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码

    如何在第一input内输入内容.textarea自动得到第一个文件框的值;      也就是说第一个input边输入textarea边得值      谢谢 <input   type=text   name="mytxt"   onkeyup="myTxta.value=this.value">      <textarea   name='myTxta'>      </textarea> <input   type=&q

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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.o

  • 将input框中输入内容显示在相应的div中【三种方法可选】

    将input框中输入内容显示在相应的div中【三种方法可选】

    例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel=

  • JS简单获取并修改input文本框内容的方法示例

    JS简单获取并修改input文本框内容的方法示例

    本文实例讲述了JS简单获取并修改input文本框内容的方法.分享给大家供大家参考,具体如下: 一 介绍 获取文本框并修改其内容可以使用getElementById()方法来实现. getElementById()方法可以通过指定的id来获取HTML标记,并将其返回. 语法: sElement=document.getElementById(id) sElement:用来接收该方法返回的一个对象. id:用来设置需要获取HTML标记的id值. 二 应用 获取文本框并修改其内容 在页面加载后的文本框

  • jQuery实现限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-valid-len", function (e) { if (e.keyCode == 8) { return true; } else { var len = $(this).data("maxlength") || 0; if (len > 0) { return (this

随机推荐