实现自适应宽度的内容输入框

已于 2022-01-19 16:37:21 修改
阅读量729 收藏
点赞数
文章标签： css3 css
于 2022-01-19 16:37:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44463883/article/details/122584315
版权

方法一 ：给普通 div 标签设置 contenteditable=“true”，设置 inline-block 以后，就可以自适应内容宽度了
方法二 ： 将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上面，设置宽度为 100%

一颗苹果想要成为一个星球
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input自适应宽度
03-26
NULL 博文链接：https://xingda1989.iteye.com/blog/1134136
react-reactinputautosizeReact的自动调整大小输入框
08-15
react-input-autosize - React的自动调整大小输入框
React开发（222）:ant design table里面使用inputNumber框
歌谣的博客
10-26 970
render: (text, row) => { const { form: { getFieldDecorator }, } = this.props; return this.state.isEdit ? ( <Form className={'form-customer'}> <Form.Item style={{ width: '100...
原生js实现自适应宽度和高度输入框
qq_41088715的博客
07-08 2770
利用js封装一个输入框组件，其宽度和高度跟随输入文字内容自适应。
input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题）
热门推荐
lianzhang861的博客
11-20 1万+
项目中想做个input随着打字，input的宽随着字数变化而长度变化 看了有人说用onkeydown,onkeyup配合使用 &lt;input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length&gt;4?this.value.length:4);" size="4"&gt; 还有...
CSS 自适应内容宽度的输入框
zjjcchina的博客
01-18 1910
目前我所知道的有两种方式，相信不难找到 1、给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以自适应内容宽度了 2、将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并覆盖在上面，设置宽度为 100% 都是很不错的方案。这次带来一个全新的纯 CSS 实现方案，相信能带来不一样的感受 一、可替换元素 首先，input 不同于普通的 div 元素，它是一个可替换元素在 C
页面上input输入框宽度实现自动调整
欢迎大家交流前端开发技术、经验及各种知识沉淀
09-22 7651
input输入框宽度实现自动调整，本文介绍两种方式，一是通过获取input**内容的宽度**实现输入框宽度的自动调整；二是通过内容字符串的长度乘以文本字体大小的积，来实现输入框宽度的自动调整。
html输入框自动调整,react-input-autosize - React的自动调整大小输入框
weixin_29876887的博客
06-03 938
React-Input-AutosizeA text input for React that resizes itself to the current content.Demo & ExamplesTo run the examples locally, run:npm installnpm startThen open localhost:8000 in a browser.Inst...
react + ant design InputNumber在form.item中 如何设置格式 比如 KG，CM
qq_37672347的博客
07-18 3323
第一种：只有一个符号格式，比如￥, $, %, &, 等等。参考antdesign 官网 参考链接：https://ant.design/components/input-number-cn/#components-input-number-demo-size 第二中：有多个符号格式，比如KG, CM等等 注意事项： 1、InputNumber的宽度width适当调...
输入框自适应大小
03-08
HTML页面，根据文字内容输入框可自适应大小，也可设置最大高度，也可无限制
Vue实现input宽度随文字长度自适应操作
10-15
主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序 内容自适应textarea表单组件（autoheight_textarea）
01-30
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： 写个评论" bindinput="listenerinput"></autoheight_textarea>
Input文本框随着输入内容多少自动延伸的实现
08-31
下面小编就为大家带来一篇Input文本框随着输入内容多少自动延伸的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3新增特性（二）
m0_48670609的博客
04-24 1368
接上一篇，CSS3新增特性，包括 2D 转换（位移、缩放、旋转、倾斜）和 3D 转换，以及动画。
CSS3（响应式布局）
最新发布
l_al_al_a的博客
04-27 781
/只在x方向上重复。//只在y方向上重复。//前一个时间用于表示过渡效果持续时间，后一个时间用于表示过渡效果的延迟。# 和 #注意：其中angle对应单位为：deg。# 及 #
CSS_sass模块化、scss模块化
小歪博客
04-25 436
CSS_sass模块化、scss模块化
css 文本属性
weixin_44565776的博客
04-25 330
重新回顾以下，css基础。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1283
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
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、付费专栏及课程。

余额充值