V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
daijinming
V2EX  ›  程序员

求教一个 HTML 样式问题,如果让 input 显示出所有的 value 值

  •  
  •   daijinming · 2021-03-30 16:35:53 +08:00 · 1658 次点击
    这是一个创建于 1094 天前的主题,其中的信息可能已经有所发展或是发生改变。

    HTML 页面

    	<input type="text" name="fgonetl" class="active" value="《《工作人员职业健康管理办法》(卫生部令第 55 号,2007 年)》">
    							第
    									<input type="text" name="fgone" class="active" value="第 6 条">
    							条规定,
    

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

    19 条回复    2021-03-30 17:40:51 +08:00
    3dwelcome
        2
    3dwelcome  
       2021-03-30 16:41:22 +08:00
    @Sapp 真秀!
    Archeb
        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/

    要兼容性用①,要简单用②,③仅供参考
    coldrain645
        4
    coldrain645  
       2021-03-30 16:43:30 +08:00
    @Sapp 真秀!
    daijinming
        5
    daijinming  
    OP
       2021-03-30 16:44:24 +08:00
    @Sapp 很感谢朋友,能用这个很直观的形式帮助我查找问题,可以这个不能满足我的需要。采用 js 动态的设置长度不是我需要的,我需要的一个 style,假如叫它自适应,简单设置下样式就好,这个 HTML 不是我能控制的,我这边顶多增加一个通用样式,HTML 中可能还会有很多这样的 input,每个都采用 js 控制不行的
    zhuweiyou
        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.
    daijinming
        7
    daijinming  
    OP
       2021-03-30 16:46:26 +08:00
    @zhuweiyou 加个限制,这个只是从服务器读取,不是用户输入的,用户不能输入
    zhuweiyou
        8
    zhuweiyou  
       2021-03-30 16:48:01 +08:00
    @daijinming 用户既然不能输入, 为什么要做成文本框... 你放个 <span> 不就行了吗?
    daijinming
        9
    daijinming  
    OP
       2021-03-30 16:48:11 +08:00
    @Archeb 很全面啊,第三个我比较青睐,但是好像不是太满足 input element,有点遗憾,还是很感谢
    InternetExplorer
        10
    InternetExplorer  
       2021-03-30 16:49:13 +08:00
    你能加 style,我觉得也应该能加 js
    daijinming
        11
    daijinming  
    OP
       2021-03-30 16:52:13 +08:00
    @InternetExplorer 你说的有道理,这个背景还真是挺多的,不能加 JS 是因为这个主要用于转 PDF 打印,并且 HTML 有很多种类的内容,表单元素也很多,所以....
    initd
        12
    initd  
       2021-03-30 16:54:31 +08:00
    不用<input>, 用<p>, 添加 ID, 然后 .innerText=
    anUglyDog
        13
    anUglyDog  
       2021-03-30 17:06:39 +08:00
    众所周知,input 有个属性是 size,为什么没人用呢,因为它搞不定非等宽字体的长度计算。
    anUglyDog
        14
    anUglyDog  
       2021-03-30 17:08:52 +08:00   ❤️ 1
    @zhuweiyou 感觉这个不够严谨,可以直接每次取值放到一个隐藏的 div 里让浏览器渲染完再取计算后的宽度,这样万无一失。
    gdtdpt
        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;
    }
    没测试过,大概是这样吧
    zhuweiyou
        16
    zhuweiyou  
       2021-03-30 17:11:07 +08:00
    @anUglyDog 可以, 弄个隐藏的, 然后取它的 width 赋值给 input width
    dongtingyue
        17
    dongtingyue  
       2021-03-30 17:18:25 +08:00
    自己写 div 加编辑属性,div 加个框伪装成 input 。input 本身应该是没办法根据输入自适应宽度的。
    simlesos
        18
    simlesos  
       2021-03-30 17:32:47 +08:00
    daijinming
        19
    daijinming  
    OP
       2021-03-30 17:40:51 +08:00
    @gdtdpt
    @zhuweiyou
    @dongtingyue
    @simlesos 感谢了老铁们
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3024 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:55 · PVG 22:55 · LAX 07:55 · JFK 10:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.