快捷導(dǎo)航

js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法

更新時(shí)間：2015年08月13日 12:23:08 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法,可實(shí)現(xiàn)根據(jù)文本框內(nèi)容動(dòng)態(tài)改變寬度的功能,涉及javascript動(dòng)態(tài)操作頁面元素屬性的技巧,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)文本框?qū)挾茸赃m應(yīng)文本寬度的方法。分享給大家供大家參考。具體如下：

一個(gè)會(huì)隨著輸入文本框的字符多少而自動(dòng)增加寬度的JS代碼，當(dāng)我們?cè)谖谋究蛑休斎胱址臅r(shí)候，如果文本框的寬度定義太小的話，那么我們輸入的字符將會(huì)被隱藏，本段代碼實(shí)現(xiàn)了文本框會(huì)自動(dòng)適應(yīng)輸入文字的多少，它會(huì)自動(dòng)加長(zhǎng)。

運(yùn)行效果如下圖所示：

具體代碼如下：

<!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> 
<html> 
<head> 
<title>文本框?qū)挾茸詣?dòng)適應(yīng)文本寬度</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)+'個(gè)字符</font>'; 
cursor.size=getText.value.length+2; 
} 
</script> 
<body> 
請(qǐng)輸入字符：<input type="text" size="3" id="text" onkeydown="changeInputlength(this);"/> 
<span id="countFont"></span> 
</body> 
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法,涉及javascript動(dòng)態(tài)操作頁面元素變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
BootStrap 下拉菜單點(diǎn)擊之后不會(huì)出現(xiàn)下拉菜單(下拉菜單不彈出)的解決方案
最近學(xué)到Bootstrap下拉菜單，學(xué)懂了教程內(nèi)容之后自己敲一個(gè)點(diǎn)擊按鈕底下彈出下拉菜單的小demo，寫完代碼發(fā)現(xiàn)運(yùn)行之后點(diǎn)擊按鈕沒反應(yīng)，下拉菜單彈不出來，下面給大家分享下解決方案
2016-12-12
JS組件Bootstrap Table布局詳解
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table布局，用戶體驗(yàn)比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下
2016-05-05
詳解javascript中原始數(shù)據(jù)類型Null和Undefined
這篇文章主要介紹了javascript中原始數(shù)據(jù)類型Null和Undefined的相關(guān)資料,需要的朋友可以參考下
2015-12-12
javascript實(shí)現(xiàn)異形滾動(dòng)輪播
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)異形滾動(dòng)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JavaScript兩種跨域技術(shù)全面介紹
JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動(dòng)態(tài)腳本技術(shù)。在JavaScript中，有一個(gè)很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）
2014-04-04
Javascript的動(dòng)態(tài)增加類的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動(dòng)態(tài)增加類的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
js實(shí)現(xiàn)回放拖拽軌跡從過程上進(jìn)行分析
今天的記錄，記錄回放拖拽痕跡，先從過程上進(jìn)行分析,需要的朋友可以參考下
2014-06-06
JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁地震撕裂效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁地震撕裂效果代碼,引入第三方插件實(shí)現(xiàn)頁面的抖動(dòng)、撕裂及圖片等效果,需要的朋友可以參考下
2015-10-10
JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法,結(jié)合實(shí)例形式分析了javascript重力下落及彈性效果的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-12-12