HTML <input type=text> 的替代方案，可以分配一个唯一的 ID 并与文本融为一体

Question

哪个 html 元素可以分配 ID 并且可以替代 <input> 元素？因为当前正在使用一个元素来根据用户输入更新该文本块；但是，appearance-wise，<input> 元素不起作用，因为它周围有一个大矩形块。

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

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

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

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

Answer 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 元素。使用输入是无法实现的。

Answer 2

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

如果这些元素只会通过脚本更改，而不是由用户直接编辑（用户通过其他方式编辑这些值），则可以用 span 替换它们（例如 <span id="userName"></span>) 并使用 $('#userName').text('Jim Smith');

设置它们的内容

Answer 3

我的建议不如@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/

HTML <input type=text> 的替代方案，可以分配一个唯一的 ID 并与文本融为一体

HTML alternative to <input type=text> that can be assigned a unique ID and that blends in with text

html

javascript

asp.net

jquery

twitter-bootstrap