<input type=text> 的 HTML 替代品，可以分配一个唯一的 ID 并与文本混合

Posted 2023-02-22

【中文标题】<input type=text> 的 HTML 替代品，可以分配一个唯一的 ID 并与文本混合

【英文标题】：HTML alternative to <input type=text> that can be assigned a unique ID and that blends in with text

【发布时间】：2015-03-04 19:15:15

【问题描述】：

什么 html 元素能够被分配一个 ID 并且也是 <input> 元素的替代品？因为当前正在使用一个元素来根据用户输入更新该文本块；然而，就外观而言，<input> 元素不起作用，因为它周围有一个大矩形块。

<div id="myModal">
...
<input type="text" id="txtUserName" size="150" disabled></input>
...
</div>

<script>
  ...
$('#txtUserName',$('#myModal')).val('Jim Smith');
  ...
</script>

除了文本周围的矩形块外，似乎还限制了框的扩展范围。

关于如何将更新后的文本与其他文本无缝融合的想法或建议？因为最终的目标是让用户能够通过电子邮件将模式中出现的内容（预填充文本和用户输入的组合）发送给另一个人。

【参考方案1】：

您可以使用contentEditable 属性使任何元素可编辑。

Example Here

在这种情况下，只需使用span，指定您的id 并设置contentEditable="true"。

这样做，元素将与段落融为一体，并且最终用户仍然可以对其进行编辑。

<span contentEditable="true" id="txtUserName"></span>

由于元素不再是input，因此请使用.text() 方法而不是.val()。

$('#txtUserName').text('Jim Smith');

..或使用纯 JS：

document.getElementById('txtUserName').textContent = 'Jim Smith';

---

关注元素时的结果：

..如果你不想要大纲：(example)

span[contentEditable="true"] 
    outline: none;

使用contentEditable 属性的好处之一是文本将换行并继续作为span 元素运行。这是使用输入无法实现的。

【讨论】：

喜欢这个contentEditable 属性。今天学到了新东西！

@JoshCrozier 这非常有效。感谢您的精彩解释和分享此信息。

【参考方案2】：

我的建议不如@Josh Crozier 的回答漂亮，但如果您要保留<input> 元素，您可以使用一点jQuery 来计算字符数，然后随着文本的增长更新输入元素的宽度。

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque 
    <input class="user-input" id="text-username" type="text" placeholder="username"> 
    eget pharetra eros. Suspendisse consequat magna id sapien ullamcorper, 
    eu dignissim lacus viverra. Vivamus euismod luctus lorem, et sodales 
    ipsum maximus sit amet. Maecenas nec 
    <input class="user-input" id="text-other" type="text" placeholder="other"> 
    dapibus nisi. Sed condimentum sodales nibh, nec consequat velit.
</p>

CSS

input 
    background-color: #eaeaea;
    border: none;
    text-align: center;
    width: 105px; /* base on 15 characters at 7px each */

jQuery

$('.user-input').each(function( index ) 

    $(this).on('keydown', function(e) 

        var $input = $(this);
        var len = $input.val().length;

        if ( len > 15 )  // 15 * 7px = 105px = width of input
            var width = len * 7; // 7px per character?        
            $input.css('width', width);     
                 

    );

);

jsFiddle：http://jsfiddle.net/369jwLt6/4/

【讨论】：

1+ .. 但我建议使用monospace 等字体，以便所有字符的宽度相同。目前，如果您输入一堆 w，输入将不够大。同样，如果您输入一堆 i，将会有额外的空格。您可能还需要考虑相对单位，例如 ems。

@JoshCrozier 确实如此。根据字体使用情况，此解决方案可能会有点“敏感”。需要 Tweeking。

谢谢@hungerstar——我最初的想法是以某种方式计算字符数，然后更新输入字段的宽度，非常感谢您解释如何完成

【参考方案3】：

如果您希望这些值是可编辑的，最简单的方法是继续使用您已经在做的输入。为了使这些输入更好地与其余内容融合，您可以通过 CSS 轻松更改它们的样式。只需为输入分配一个类，然后在样式表中为其添加一些样式。

如果这些元素仅通过脚本进行更改，而不是由用户直接编辑（用户通过其他方式编辑这些值），您可以将它们替换为跨度（例如 <span id="userName"></span>）并设置他们的内容与$('#userName').text('Jim Smith');

【讨论】：

感谢@StefanoDalpiaz 的反馈——我仍然需要掌握 CSS 以利用您的建议，但您将输入分配给类的其他建议是有道理的。再次感谢