这是一小段自适应宽度的输入框代码

最新推荐文章于 2022-09-22 17:13:17 发布
最新推荐文章于 2022-09-22 17:13:17 发布
阅读量1k 收藏
点赞数
分类专栏： html/javascript 文章标签： border input class webkit div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szj1638866/article/details/6347646
版权

CSS代码：


　　h2 { margin:0; padding:10px 0; font-size:14px; }


　　.mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }


　　.mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }


　　.mod-retweet .mod-retweet-textarea textarea {padding: 0;margin: 0; border:0 none; font-size:12px; height:80px; line-height:1.5em; width:100%; display:block }


　　.mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }


　　HTML代码：


　　<!DOCTYPE HTML>


　　<html>


　　<head>


　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


　　<title>模拟宽度自适应的输入框</title>


　　</meta>


　　</head>


　　<body>


　　<h1>模拟宽度自适应的输入框</h1>


　　<div class="mod-retweet">


　　<h2>模拟input的自适应：</h2>


　　<div class="mod-retweet-textarea">


　　<input type="text" name="textfield" id="textfield"/>


　　</div> </div> <hr />


　　<div class="mod-retweet"> <h2>模拟textarea的自适应：</h2> <div class="mod-retweet-textarea">


　　<textarea maxlength="500" rows="5" cols="45" name="bookcontent"></textarea> </div> </div>


　　</body>


　　</html>


　　缺点：


　　1、textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。


　　2.textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。

 

老时_sjz
关注
专栏目录
input输入框自适应宽度
katherin_wanzi的博客
11-15 1778
代码如下 <template> <div class="rc-text" contenteditable ref="componentRef" :id="domId" :class="getClassName" type="text" v-text="'text'"></div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue' imp
input自适应宽度
03-26
NULL 博文链接：https://xingda1989.iteye.com/blog/1134136
CSS 自适应内容宽度的输入框
zjjcchina的博客
01-18 2087
目前我所知道的有两种方式，相信不难找到 1、给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以自适应内容宽度了 2、将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上面，设置宽度为 100% 都是很不错的方案。这次带来一个全新的纯 CSS 实现方案，相信能带来不一样的感受 一、可替换元素 首先，input 不同于普通的 div 元素，它是一个可替换元素在 C
页面上input输入框宽度实现自动调整
欢迎大家交流前端开发技术、经验及各种知识沉淀
09-22 8815
input输入框宽度实现自动调整，本文介绍两种方式，一是通过获取input**内容的宽度**实现输入框宽度的自动调整；二是通过内容字符串的长度乘以文本字体大小的积，来实现输入框宽度的自动调整。
input宽度随输入内容自适应（以el-input为例）
Honiler的博客
05-27 9738
1.input用绝对定位，使其宽度与父容器保持一致 2.利用一个隐藏的div对齐input的内容，以此来撑开父容器宽度
Vue实现input宽度随文字长度自适应操作
10-15
本文主要介绍如何利用Vue框架实现一个input输入框，让其宽度能够随着用户输入的文字长度动态调整，以适应不同长度的输入内容。 在日常的前端开发过程中，我们经常会遇到需要根据输入内容自动调整宽度的场景，以提升...
易语言自适应尺寸的输入框源码
06-06
这段代码在窗口尺寸改变时，会调整输入框的位置和大小，使其始终适应窗口。 五、实际应用 自适应尺寸的输入框在多种场景下都非常有用，如桌面应用程序、移动应用的适配等。例如，在设计一个全屏应用时，自适应的...
input 宽度自适应
09-06
这两种方法分别解决了输入框宽度和文本区域高度的自适应问题。需要注意的是，由于浏览器兼容性的差异，开发者在实现这类功能时通常需要进行跨浏览器的测试，以确保在多种环境下都能正常工作。 总的来说，输入框宽度...
实现自适应宽度的内容输入框
weixin_44463883的博客
01-19 829
方法一 ：给普通 div 标签设置 contenteditable=“true”，设置 inline-block 以后，就可以自适应内容宽度了 方法二 ： 将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上面，设置宽度为 100% ...
input输入框的宽度自适应
你不能拿走我的蜡烛的博客
09-30 5万+
场景：在写H5移动端的时候，常常会遇到再顶部有搜索框的情况，如下图： 因为要适应不同的移动设备的屏幕宽度，若将所有的元素宽度写死，更换设备后无论是屏幕宽度增大还是缩小，样式一定会乱掉。因此可以将中间输入框的宽度设置为可变的，即可跟随屏幕宽度的变化而变化，这样就解决的适配的问题。且看示例代码： HTML<div class="title_box"> <div class="title_
html文本框自动宽度,input文本框宽度自适应
weixin_30935475的博客
05-31 3398
实际应用中，可能需要input文本框能够根据输入字符的所占据的宽度自动调节尺寸。直接计算输入字符所占据的宽度，就如同直接称量大象体重一样比较困难。可以和当年曹冲一样转换思路，达到殊途同归的效果。下面分享一个比较巧妙的实现方式，需要的朋友可以做一下参考。代码实例如下:/p>font-size:12px;}#dis {position:absolute;z-index:1000;left:-50...
angular2中input只允许输入数字，而且数字有千分位格式
maoguiyou的专栏
03-14 6319
直接奔主题，不扯淡：需求：在angular2表单中，input只允许用户输入数字，而且要把数字格式化显示，比如1000 =&gt; 1,000思考：用type=number能不能达到？ &lt;input type="number" class="form-control" ngModel="{{config.value|number}}" (ngModelChange)="config.valu...
简单的input自适应宽度
qq_35363709的博客
12-06 1万+
//获取文本宽度 vartextWidth=function(text){ varsensor= $('&lt;pre&gt;'+text+'&lt;/pre&gt;').css({display:'none'}); $('body').append(sensor); varwidth=sensor.width()......
Element：设置el-input宽度大小
热门推荐
科技向善
02-29 10万+
下方审批人输入框太长，导致界面像假村花东施 解决办法： 使用Layout中的col组件，并设置其span属性大小，span为24时，铺满赤道、为8时就是占1/3，其他以此类推。 ...
关于col栅栏系统与div自适应浏览器窗口
Nick_YayiAhoo的博客
12-04 1776
首先是关于col栅栏系统，比较系统的用法和规则在官网有介绍，这里说在项目开发中比较常见和容易忽略的问题。 1、col-lg、col-md、col-sm、col-xs四种： col-lg一般用于大屏设备， (min-width:1200px); col-md一般用于中屏设备， (min-width：992px); col-sm一般用于小屏设备， (min-width：768px);
textarea自适应窗口的宽度的代码
happyzhen的专栏
12-02 1236
textarea自适应窗口的宽度的代码   添加日期：2008-8-9 12:58:54     [大 中 小]   首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝100%”这样的写法，具体示例： &lt;style&gt;textarea{width:100%;height:100%;}&lt;/style&gt;&lt;textarea...
文本输入框自适应高度
九龙吟的专栏
07-07 5504
经过测试和实践，很完美！
angular input (踩坑)-type=number && toFixed()
weixin_30420305的博客
02-08 307
当我的代码为<input type="number" ng-model="data.a"> js: 　　$scope.data={ 　　　　a = 1.0002 　　} 　　$scope.data.a = $scope.data.a.toFixed(2); 　　就会报错： 当时找了半天错误，后来发现，将type=number 改成 type=text...
antdv a-input输入框自适应宽度
最新发布
04-12
可以使用flex布局实现a-input输入框自适应宽度。给a-input的外层包裹一个flex容器，并设置flex属性为1即可。具体代码如下： ```html ;"> ``` 这样，a-input输入框的宽度就可以根据父容器自适应了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值