求教一个 HTML 样式问题，如果让 input 显示出所有的 value 值
daijinming · 2021-03-30 16:35:53 +08:00 · 1842 次点击这是一个创建于 1332 天前的主题，其中的信息可能已经有所发展或是发生改变。
<input type="text" name="fgonetl" class="active" value="《《工作人员职业健康管理办法》（卫生部令第 55 号，2007 年）》">
第
<input type="text" name="fgone" class="active" value="第 6 条">
条规定，
上图中是一个 HTML 页面, 两个输入框都是一样的长度，这样如果字太多就会出现隐藏的情况，这个效果是不能满足业务需要的，请问下前端高手，如何解决这样样式问题
 |
1
Sapp 2021-03-30 16:39:47 +08:00  7
|
 |
3
Archeb 2021-03-30 16:41:57 +08:00
1 、用 JS
2 、用 span+contenteditable 模拟 input 3 、奇技淫巧 https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ 要兼容性用①，要简单用②，③仅供参考 |
 |
4
coldrain645 2021-03-30 16:43:30 +08:00
@Sapp 真秀!
|
 |
5
daijinming OP @Sapp 很感谢朋友，能用这个很直观的形式帮助我查找问题，可以这个不能满足我的需要。采用 js 动态的设置长度不是我需要的，我需要的一个 style，假如叫它自适应，简单设置下样式就好，这个 HTML 不是我能控制的，我这边顶多增加一个通用样式，HTML 中可能还会有很多这样的 input,每个都采用 js 控制不行的
|
 |
6
zhuweiyou 2021-03-30 16:45:11 +08:00
<input oninput="this.style.width = this.value.replace(/[^\x00-\xff]/g, '**').length / 2 * 14 + 'px'" />
14 是你的 font-size. |
|
7
daijinming OP @zhuweiyou 加个限制，这个只是从服务器读取，不是用户输入的，用户不能输入
|
|
8
zhuweiyou 2021-03-30 16:48:01 +08:00
@daijinming 用户既然不能输入, 为什么要做成文本框... 你放个 <span> 不就行了吗?
|
|
9
daijinming OP @Archeb 很全面啊，第三个我比较青睐，但是好像不是太满足 input element,有点遗憾，还是很感谢
|
 |
10
InternetExplorer 2021-03-30 16:49:13 +08:00
你能加 style，我觉得也应该能加 js
|
|
11
daijinming OP @InternetExplorer 你说的有道理，这个背景还真是挺多的，不能加 JS 是因为这个主要用于转 PDF 打印，并且 HTML 有很多种类的内容，表单元素也很多，所以....
|
 |
12
initd 2021-03-30 16:54:31 +08:00
不用<input>, 用<p>, 添加 ID, 然后 .innerText=
|
 |
13
anUglyDog 2021-03-30 17:06:39 +08:00
众所周知，input 有个属性是 size，为什么没人用呢，因为它搞不定非等宽字体的长度计算。
|
|
14
anUglyDog 2021-03-30 17:08:52 +08:00 1
@zhuweiyou 感觉这个不够严谨，可以直接每次取值放到一个隐藏的 div 里让浏览器渲染完再取计算后的宽度，这样万无一失。
|
 |
15
gdtdpt 2021-03-30 17:09:36 +08:00
<div>《《工作人员职业健康管理办法》（卫生部令第 55 号，2007 年）》</div>
div { display: inline-block; padding-bottom: 5px; border-bottom:1px solid black; } 没测试过，大概是这样吧 |
 |
17
dongtingyue 2021-03-30 17:18:25 +08:00
自己写 div 加编辑属性，div 加个框伪装成 input 。input 本身应该是没办法根据输入自适应宽度的。
|
 |
18
simlesos 2021-03-30 17:32:47 +08:00
|
|
19
daijinming OP |
Select Language