input 宽度自适应

无标题文档

function checkLength(which) {
var maxchar=100;
var oTextCount = document.getElementById("char");
iCount = which.value.replace(/[^\u0000-\u00ff]/g,"aa").length;
if(iCount"+ iCount+"";
which.style.border = '1px dotted #FF0000';
which.size=iCount+2;
}
else alert("请不要超过"+maxchar);
}

0个字符

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

input高度固定,自动增宽

textarea宽度固定,自动增高

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

感谢网友“liufabin”提出的关于不支持FF的问题,第一个在FF下经过测试时支持的,第二个中的高度自适应不支持,我在网上找了一个JQUERY的插件,插件地址是:http://plugins.jquery.com/project/autogrow需要用到的JS文件地址为
http://img.jb51.net/jslib/jquery/jquery.autogrow.js

input宽度自适应 2009-05-28

$(function(){
$("#textarea").autogrow();
})

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • div+css实现自适应宽度按钮

    先来看张图片: 原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形.再通过hover标签去滑动图片.而你只需要一张图片: ok,看看代码吧. CSS: 复制代码 代码如下: *{margin:0; padding:0;}   body{padding:10px; font-size:12px;}   h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}   a{background:url(1.

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

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

  • 左侧固定宽度,右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修改). 于是自己写了个简单的左右两列的布局,没用到什么hack,很简单,只是练手用用. css代码:left和right都贴住左侧.设置left在right上面(z-index):在right内加个放内容的层(content):设置content距离right的左侧为200px,即刚巧等于left的

  • EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码

    tabs代码如下: 复制代码 代码如下: <div id="tabs" class="easyui-tabs"> <div title="tabs1"> tabs1 </div> <div title="tabs2"> tabs2 </div> </div> 如果id="tabs"的div未设置宽度和高度,easyUI默认的宽度和高度是

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过

    废话不多说,贴上代码,也算是自己的一个代码存储. 复制代码 代码如下: var temp_iframe var content = document.getElementById('right'); //id为 right的DOM容器中,进行创建iframe和宽高自适应 var c = 0; function append(filename) { var the_iframe = "helpfile" + c; temp_iframe = document.createElement(

  • input 宽度自适应

    无标题文档 function checkLength(which) { var maxchar=100; var oTextCount = document.getElementById("char"); iCount = which.value.replace(/[^\u0000-\u00ff]/g,"aa").length; if(iCount"+ iCount+""; which.style.border = '1px dotte

  • Vue实现input宽度随文字长度自适应操作

    业务需求,输入文字,后面的元要紧随其后,奈何input默认是有宽度,我想要达到,输入文字,动态改变input的宽度,试了很多方法,目前自己琢磨一种,有遇到问题的可以参考一下, 直接贴代码 <div class="textcontain"> <input type="text" v-model.number="item.cardComboMoney" maxlength="5" placeholder=&quo

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

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

  • Antd表格滚动 宽度自适应 不换行的实例

    我就废话不多说了,大家还是直接看代码吧~ <Table className={styles.table} rowKey={(record) => record.key} columns={columns} dataSource={dataSource} scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了 pagination={false} /> styles.less .table { :global { .ant-

  • iOS 中根据屏幕宽度自适应分布按钮的实例代码

    下载demo链接:https://github.com/MinLee6/buttonShow.git 屏幕摆放的控件有两种方式,一种根据具体内容变化,一种根据屏幕宽度变化. 下面我分别将两个方式,用代码的方式呈现: 1:根据具体内容变化 // // StyleOneViewController.m // buttonShow // // Created by limin on 15/06/15. // Copyright © 2015年 信诺汇通信息科技(北京)有限公司. All rights

  • CSS网页布局入门教程6:左列固定,右列宽度自适应

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 3

  • 微信小程序 图片宽度自适应的实现

     微信小程序 图片宽度自适应的实现 实例代码: wxml 代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="image&

  • CSS网页布局入门教程5:二列宽度自适应

    从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 300px;      w

  • React根据宽度自适应高度的示例代码

    有时对于响应式布局,我们需要根据组件的宽度自适应高度.CSS无法实现这种动态变化,传统是用jQuery实现. 而在React中无需依赖于JQuery,实现相对比较简单,只要在DidMount后更改width即可 Try on Codepen 需要注意的是在resize时候也要同步变更,需要注册个监听器 class Card extends React.Component { constructor(props) { super(props); this.state = { width: prop

  • 微信小程序实现富文本图片宽度自适应的方法

    引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机屏幕对应的宽度 微信小程序需要知道的知识 需要知道微信小程序里有自己的宽度标准,单位为rpx: 针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx: 解决 WXML <view class='html_detail'> <rich-text nodes='{{artical}}

随机推荐