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

本文实例讲述了js实现文本框宽度自适应文本宽度的方法。分享给大家供大家参考。具体如下:

一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长。

运行效果如下图所示:

具体代码如下:

<!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN">
<html>
<head>
<title>文本框宽度自动适应文本宽度</title>
</head>
<script type="text/javascript">
function changeInputlength(cursor)
{
var getcount=document.getElementById("countFont");
var getText=document.getElementById("text");
getcount.innerHTML='<font>第'+(parseInt(getText.value.length)+1)+'个字符</font>';
cursor.size=getText.value.length+2;
}
</script>
<body>
请输入字符:<input type="text" size="3" id="text" onkeydown="changeInputlength(this);"/>
<span id="countFont"></span>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 文本框
, 自适应
文本宽度
文本框自适应宽度、文本框高度自适应、文本框自适应、css 文本框自适应长度、visio 文本框 自适应,以便于您获取更多的相关知识。

时间: 2025-01-21 08:02:53

js实现文本框宽度自适应文本宽度的方法_javascript技巧的相关文章

JS实现点击复选框将按钮或文本框变为灰色不可用的方法_javascript技巧

本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法.分享给大家供大家参考.具体如下: 在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这个JS代码就是实现这样一个功能,只有你点击了确认提交,下边的按钮才生效. 运行效果如下图所示: 具体代码如下: <html> <head> <title>点击复选框按钮变为不可用</title> </head> <script> var

js获取会话框prompt的返回值的方法_javascript技巧

本文实例讲述了js获取会话框prompt的返回值的方法.分享给大家供大家参考.具体分析如下: 获取会话框prompt的返回值,见例子: 复制代码 代码如下: <html> <head> <script type="text/javascript"> if(prompt("请输入密码","") == "admin"){  document.write("密码正确"); }e

JS控制文本框textarea输入字数限制的方法_javascript技巧

复制代码 代码如下: <html>     <head>     <title>JS限制Textarea文本域字符个数</title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <SCRIPT LANGUAGE="JavaScript">     <!--

在js(jquery)中获得文本框焦点和失去焦点的方法_javascript技巧

先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

JS模仿编辑器实时改变文本框宽度和高度大小的方法_javascript技巧

本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法.分享给大家供大家参考.具体如下: 这里演示JS模仿编辑器中实时改变文本框大小,包括宽度和高度的方法,在一些在线编辑器,比如eWebEditor中,就有一个功能,让文本框不断的增大或减小,以适应页面的大小,这个功能是如何实现的呢?请您参考一下这个程序,相信你会从中获益. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/

js判断文本框输入的内容是否为数字_javascript技巧

如何验证文本框中的内容是否为数字,本文提供了三种方法,希望对大家的学习有所启发. 在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能. 下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]

js实现点击文本框显示日期选择器特效代码分享_javascript技巧

为大家分享的JavaScript图片轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js点击文本框显示日期选择器</title> <link type="text/css" rel="stylesheet" href="calen

PHP转换文本框内容为HTML格式的方法_php技巧

本文实例讲述了PHP转换文本框内容为HTML格式的方法.分享给大家供大家参考,具体如下: 有时候我们将会用到将多行文本框中输入的内容以html格式显示出来,这样子可以保持原来的文本格式,如换行.回车等.可以通过下面的函数实现: function shtm($design_str) { $str=trim($design_str); // 取得字串同时去掉头尾空格和空回车 //$str=str_replace("<br>","",$str); // 去掉&

js文本框走动跑马灯效果代码分享_javascript技巧

本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </

JS判断文本框内容改变事件的简单实例_javascript技巧

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