打印

随着输入文字的多少自动变化宽度的INPUT

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

1^# 大中小发表于 2007-10-16 14:22

突发奇想，也不知道有没有实际用处，也不是很精确。

提示：您可以先修改部分代码再运行

[ 本帖最后由老二于 2007-10-16 14:23 编辑 ]

本帖最近评分记录

marvellous 威望 +2 原创内容 2007-10-16 14:41

三无青年502

TOP

西部数码港台主机新上线即买即用 | 211工程高起专、高起本、专升本

sunritz

李杨

版主

认证
帖子: 907
体力: 1813
威望: 3
当前: 湖北武汉

专长 网页设计,Flash,前端制作

2^# 大中小发表于 2007-10-16 14:30

肯定有用途,呵呵,强

Hello,Yang!

TOP

PSD网页模板下载,高端实用 | 微软 visual studio 2010 专题

appleky3040

新手上路

帖子: 6
体力: 16
威望: 0
离线: 267 天

3^# 大中小发表于 2007-10-16 14:35

不错啊！

TOP

刘宾设计咨询机构/案例集1.3下载(268p) | 用画笔实现你的“原画设计师”梦想！

jiqinggu

中级会员

帖子: 218
体力: 476
威望: 0
离线: 23 天

4^# 大中小发表于 2007-10-16 14:42

这样不太行把，到多少字的时候要换行把，不然页面被撑大的

TOP

marvellous

金翅擘海

钻石会员

帖子: 15273
体力: 28182
威望: 143
当前: 北京朝阳区

5^# 大中小发表于 2007-10-16 14:48

要考虑换行的话，就不用Input了，改用Textarea.

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

lwkyy

学习笔记

中级会员

帖子: 169
体力: 343
威望: 0
当前: 上海徐汇
离线: 382 天

专长 前端制作,JS,PHP

6^# 大中小发表于 2007-10-16 14:50

呵呵，是啊，是有用的，而且代码也不长~

学习笔记

TOP

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

7^# 大中小发表于 2007-10-16 14:57

在经典混迹了快5年了从一只菜鸟变成了现在的老菜鸟威望一直是0 多谢版主支持给加了分

如要考虑换行就用texterea 对js进行简单的修改就可以变成判断输满一行自动将texterea 的行数加1.

三无青年502

TOP

jiqinggu

中级会员

帖子: 218
体力: 476
威望: 0
离线: 23 天

8^# 大中小发表于 2007-10-16 14:58

楼主能不能加个输入最大值

TOP

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

9^# 大中小发表于 2007-10-16 15:02

引用:

原帖由 jiqinggu 于 2007-10-16 14:58 发表
楼主能不能加个输入最大值

提示：您可以先修改部分代码再运行

三无青年502

TOP

marvellous

金翅擘海

钻石会员

帖子: 15273
体力: 28182
威望: 143
当前: 北京朝阳区

10^# 大中小发表于 2007-10-16 15:08

Very Good!

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

sunritz

李杨

版主

认证
帖子: 907
体力: 1813
威望: 3
当前: 湖北武汉

专长 网页设计,Flash,前端制作

11^# 大中小发表于 2007-10-16 15:09

发现一个bug,全部输入f,input将会显示双倍宽度.别的字母和数字不会出现这情况

Hello,Yang!

TOP

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

12^# 大中小发表于 2007-10-16 15:14

引用:

原帖由 sunritz 于 2007-10-16 15:09 发表
发现一个bug,全部输入f,input将会显示双倍宽度.别的字母和数字不会出现这情况

呵呵，不只是f 你输入l 也是，还有i，一些半角的符号也是，因为这几个字母站的地方小，所以我在一开头就说明了不是很精确的这个，要想做的精确的话就需要过滤这些“苗条”的字符

[ 本帖最后由老二于 2007-10-16 15:16 编辑 ]

三无青年502

TOP

marvellous

金翅擘海

钻石会员

帖子: 15273
体力: 28182
威望: 143
当前: 北京朝阳区

13^# 大中小发表于 2007-10-16 15:16

这几个字符：
l i . ,
也是一样，看来跟字符宽度有一定关系。
可参考一下下面这个：

提示：您可以先修改部分代码再运行

[ 本帖最后由 marvellous 于 2007-10-16 15:52 编辑 ]

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

numa001

numa001

银牌会员

帖子: 2027
体力: 2201
威望: 2

14^# 大中小发表于 2007-10-16 15:58

用鼠标复制粘贴（不用键盘）就没有反映了。。。。。。。。

男人善于戳穿女人的漏洞，而女人善于把握男人的把柄

TOP

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

15^# 大中小发表于 2007-10-16 17:14

引用:

原帖由 numa001 于 2007-10-16 15:58 发表
用鼠标复制粘贴（不用键盘）就没有反映了。。。。。。。。

貌似将onkeyup改为onpropertychange可以解决复制粘贴

三无青年502

TOP

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

16^# 大中小发表于 2007-10-16 17:17

marvellous 版主的更简单用css的溢出来处理 PF!

三无青年502

TOP

weihua22

缘客

中级会员

帖子: 197
体力: 412
威望: 0
当前: 黑龙江哈尔滨
离线: 144 天

专长 网页设计,前端制作,WAP

17^# 大中小发表于 2007-10-16 17:44

牛。。。

web设计师群:47071188

TOP

blieveme2

初级会员

帖子: 30
体力: 85
威望: 0
离线: 983 天

18^# 大中小发表于 2007-10-16 17:52

引用:

原帖由 marvellous 于 2007-10-16 15:16 发表
这几个字符：
l i . ,
也是一样，看来跟字符宽度有一定关系。
可参考一下下面这个：
<center> input高度固定，自动增宽<br> <input type="text" style="width:60;overflow-x:visible;overflow-y:visible;"> <br> <br> textarea宽度固定，自动增高<br> <textarea type="text" style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>
提示：您可以先修改部分代码再运行

这个如何设定不许超过某个最大值啊？

[ 本帖最后由 blieveme2 于 2007-10-16 17:53 编辑 ]

TOP

marvellous

金翅擘海

钻石会员

帖子: 15273
体力: 28182
威望: 143
当前: 北京朝阳区

19^# 大中小发表于 2007-10-16 18:01

试了一下，不知道这样行不行？

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

十字花下

花匠

中级会员

认证
帖子: 554
体力: 329
威望: 4
当前: 北京海淀区
离线: 2 天

专长 UE,产品设计,项目管理

20^# 大中小发表于 2007-10-16 19:28

marvellous跟楼主都是强人,pf,我从前怎么没考虑过这个问题呢

marvellous,textarea没有size表搞错.

[ 本帖最后由十字花下于 2007-10-16 19:29 编辑 ]

ITFeed

TOP

blieveme2

初级会员

帖子: 30
体力: 85
威望: 0
离线: 983 天

21^# 大中小发表于 2007-10-16 20:18

引用:

原帖由 marvellous 于 2007-10-16 18:01 发表
试了一下，不知道这样行不行？

不完美，虽然提示不能超过100字，但是点了确定之后还能继续输入。

[ 本帖最后由 blieveme2 于 2007-10-16 20:19 编辑 ]

TOP

jiqinggu

中级会员

帖子: 218
体力: 476
威望: 0
离线: 23 天

22^# 大中小发表于 2007-10-17 11:07

金翅擘海版主，你的问题多、多，如果一个输入的时候一直按着，不放手，字符数就不变化了，另外，虽然提示不能超过100字，但是点了确定之后还能继续输入。

TOP

marvellous

金翅擘海

钻石会员

帖子: 15273
体力: 28182
威望: 143
当前: 北京朝阳区

23^# 大中小发表于 2007-10-17 12:34

搜索“文本框输入限制字数”。
重新又写了一个，谢谢各位。

<HTML>     
  <BODY>     
  <script>     
    function   textCounter(field,   maxlimit)   {     
      if   (field.value.length   >   maxlimit)     
        field.value   =   field.value.substring(0,   maxlimit);     
      else     
        document.WRITEMSGTXT.remLen.value   =   maxlimit   -   field.value.length;     
    }     
    </script>     
    <form   name=WRITEMSGTXT>     
    <table   width=447   bgcolor=#eaffe0>     
    <tr>     
      <td   width=50%   colspan=3><font   color=46A718>有事请留言</font></td>     
            <td   align=right><font>剩余字数:<input   name=remLen   value=50   readonly   type=text   size=4   maxlength=3   style="background-color:   #eaffe0;   border:   0;   color:   red"></font></td>     
    </tr>     
    </table>     
    <table   width=447>     
    <tr   align=center>     
      <td   colspan=3><textarea   name=words   class=input1   onPropertyChange="textCounter(WRITEMSGTXT.words,   50)" type="text"  style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>
</td>     
    </tr>     
    </form>     
    </table>     
  </BODY>     
  </HTML>

提示：您可以先修改部分代码再运行

[ 本帖最后由 marvellous 于 2007-10-17 13:13 编辑 ]

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

csok

初级会员

帖子: 44
体力: 85
威望: 0
当前: 湖南长沙
离线: 20 天

24^# 大中小发表于 2007-10-17 13:23

先收藏等要用了再拿！~

17su.com

TOP

QuuBing

新手上路

帖子: 14
体力: 22
威望: 0
当前: 浙江杭州
离线: 888 天

25^# 大中小发表于 2007-10-17 13:27

耐看，收藏下

TOP

yltfy

放飞梦想

高级会员

帖子: 406
体力: 838
威望: 0
当前: 广东广州
离线: 44 天

专长 网页设计,平面,前端制作

26^# 大中小发表于 2007-10-17 13:28

这个经典啊,要做个记号

学习JavaScript...

TOP

老二 [楼主]

im502

银牌会员

认证
帖子: 530
体力: 1548
威望: 2
当前: 北京东城区
离线: 24 天

专长 前端制作,JS,PHP

27^# 大中小发表于 2007-10-17 15:40

23楼完美版呵呵

三无青年502

TOP

henlly

银牌会员

帖子: 464
体力: 1175
威望: 1
当前: 福建福州
离线: 13 天

28^# 大中小发表于 2007-10-17 20:45

引用:

原帖由 marvellous 于 2007-10-17 12:34 发表
搜索“文本框输入限制字数”。
重新又写了一个，谢谢各位。
[html]



function textCounter(field, maxlimit) {
   if (field.value.length > maxlimit) ...

在FIREFOX下好象没效果哦???

人生如棋, 举手无悔!!! 珍惜现在的每一分每一秒,珍惜你身边的每一个人;每一个机会. 别错过了再说后悔......

TOP

521yda3

新手上路

帖子: 4
体力: 14
威望: 0
当前: 安徽大洋州
离线: 1006 天

29^# 大中小发表于 2007-10-18 16:34

不好，用黏贴的连字数都不统计了。

*594223*

TOP

lhjcncn

webliving

初级会员

帖子: 43
体力: 99
威望: 0
当前: 浙江杭州
离线: 15 天

专长 前端制作,JS,AS

30^# 大中小发表于 2007-12-7 15:51

都是高手啊

TOP