带有右侧附加文本的输入字段

Question

我在我的项目上做了一个奇特的评论列表，结构如下：

如您所见，有一个评论列表，在他的底部有一个输入字段（textarea）来提交评论。请注意，右边附有当前用户名（让我们称之为简单的静态附加文字）。

我刚发现this little JS通过调整内容来自动调整输入字段的大小。

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}
$('input[type="text"]').keyup(resizeInput).each(resizeInput);

但这还不够。我需要它用于textarea并且我希望它在注释足够长以包裹在另一行时表现正常。根据定义，输入字段是一个框，与我想要的相比，它显然表现得很糟糕：

相反，这应该是正确的行为：

我到处寻找，我无法以任何方式实现这一目标。有人可以帮帮我吗？

Answer 1

Here是textarea的一个很好的插件。但它使用jQuery。

一如既往地使用简单。

$(document).ready(function(){
    $('textarea').autosize();   
});

Answer 2

我认为你的意思是

注意：不检查选择并绑定到文档。练习让读者绑定到特定字段并将其换成跨度

FiDDLE

$(document).keypress(function(e) {
  var char = String.fromCharCode(e.which);
  if (e.which==13) char = '<br/>'; // needs to handle backspace etc.
  $("#textfield").append(char);
  $("#hiddenfield").val($("#textfield").text()); // or .html if you want the BRs
  e.preventDefault();
});

使用

<span id="textfield"></span> - by My Username

如果您认为该字段是满足的，那么您将在Chrome中获得此功能，因此可能需要一些额外的CSS

Answer 3

您可以使用contenteditable属性：

<span contenteditable="true">comment</span> by <span class="userName">someone</span>

practically all browsers支持此功能。使用正确的CSS，您可以为内容加下划线并限制宽度。

Answer 4

<span>与contenteditable（supported in IE too）一起使用。这是一个小提琴：http://jsfiddle.net/goabqjLn/2/

<span contenteditable>Insert a comment...</span> by My Username

然后，使用JavaScript，将镜像跨度内部文本的事件侦听器附加到隐藏的输入字段中，以便随<form>一起提交。

编辑：我已经更新了小提琴，还包含了JS代码。这是更新的代码：

<span class="editor" id="editor" contenteditable data-placeholder="Insert a comment...">Insert a comment...</span> by My Username
<!-- Hide this textarea in production: --> 
<textarea type="text" id="comment"></textarea>

和JS：

function mirror() {    
    var text = $('#editor').html().trim()
       .replace(' ', ' ')
       .replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
       .replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
       .replace(/(<([^>]+)>)/ig, "");   // remove any remaining tags    

    $('#comment').val(text);
}

$('#editor').focus(function () { 
    var editor = $(this);

    if (editor.text() == editor.attr('data-placeholder')) {
        editor.text('');
    }
}).blur(function () { 
    var editor = $(this);

    if (editor.text() == editor.attr('data-placeholder')) {
        editor.text(editor.attr('data-placeholder'));
    }
}).blur(mirror).keyup(mirror);