技术解析

求教一个 HTML 样式问题,如果让 input 显示出所有的 value 值
0
2021-06-07 12:22:39
idczone

HTML 页面

	
							条规定,

上图中是一个 HTML 页面, 两个输入框都是一样的长度,这样如果字太多就会出现隐藏的情况,这个效果是不能满足业务需要的,抗投诉服务器请问下前端高手,如何解决这样样式问题


https://lmbtfy.tk/?q=aW5wdXQg6L6T5YWl5qGG5qC55o2u5paH5a2X6ZW/5bqm5Yqo5oCB5pS55Y+Y5a695bqm

真秀!

1 、用 JS
2 、用 span+contenteditable 模拟 input
3 、奇技淫巧 https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
要兼容性用①,要简单用②,③仅供参考

真秀!

很感谢朋友,能用这个很直观的形式帮助我查找问题,可以这个不能满足我的需要。采用 js 动态的设置长度不是我需要的,我需要的一个 style,假如叫它自适应,简单设置下样式就好,这个 HTML 不是我能控制的,我这边顶多增加一个通用样式,HTML 中可能还会有很多这样的 input,每个都采用 js 控制不行的


14 是你的 font-size.

加个限制,这个只是从服务器读取,不是用户输入的,用户不能输入

用户既然不能输入, 为什么要做成文本框... 你放个 不就行了吗?

很全面啊,第三个我比较青睐,但是好像不是太满足 input element,有点遗憾,还是很感谢

你能加 style,我觉得也应该能加 js

你说的有道理,这个背景还真是挺多的,不能加 JS 是因为这个主要用于转 PDF 打印,并且 HTML 有很多种类的内容,表单元素也很多,所以....

不用, 用

, 添加 ID, 然后 .innerText=

众所周知,input 有个属性是 size,为什么没人用呢,因为它搞不定非等宽字体的长度计算。

感觉这个不够严谨,可以直接每次取值放到一个隐藏的 div 里让浏览器渲染完再取计算后的宽度,这样万无一失。

《《工作人员职业健康管理办法》(卫生部令第 55 号,2007 年)》

div {
display: inline-block;
padding-bottom: 5px;
border-bottom:1px solid black;
}
没测试过,大概是这样吧

可以, 弄个隐藏的, 然后取它的 width 赋值给 input width

自己写 div 加编辑属性,div 加个框伪装成 input 。input 本身应该是没办法根据输入自适应宽度的。

https://codepen.io/shshaw/pen/c72208b279d750f1ab46b6a45bbd04d7




感谢了老铁们

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服