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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现背景图自适应窗口大小

    话不多说,请看代码 <script type="text/javascript"> window.onresize = window.onload = function() { var w,bgImg; if(!!(window.attachEvent && !window.opera)) { w = document.documentElement.clientWidth; } else { w = window.innerWidth; }if(w>

  • Iframe 自适应高度并实时监控高度变化的js代码

    google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用! 1.首先给出个Iframe. 复制代码 代码如下: <iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000" frameborder=&

  • javascript自适应宽度的瀑布流实现思路

    javascript自适应宽度的瀑布流实现思路

    这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • 几行js代码实现自适应

    在javascript写下如下几行: (function (doc, win, undefined) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth === undefined) r

  • JS制作手机端自适应缩放显示

    JS制作手机端自适应缩放显示 示例一: <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>

  • js实现屏幕自适应局部代码分享

    有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0; list-style:none; } div{ margin:0 auto; heig

  • javascript 装载iframe子页面，自适应高度

    假设主页面有一个div,里面放置一个iframe 复制代码 代码如下: <div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></

  • JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs

  • 通过JAVAScript实现页面自适应

    有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应.事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到.         实现原理:          获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关

随机推荐