<input type="text" /> 带换行

Question

我很想显示文本输入，但如果文本太长，它们应该会中断。但是用户应该不能自己插入新行。原因是我总是希望它的整个值可见。

我认为没有 CSS 的解决方案，这将是最好的，所以我决定用 textarea 元素替换所有输入元素并自动调整它的高度。为了防止出现多行，我只需替换它们即可。

我是用这段代码做的，但特别是我抓取所有输入属性以将它们传送到 texarea 的部分对我来说似乎很尴尬。

$(document).ready(function(){
    $('input[type="text"]').each(function(){
        var attrs = { rows: 1 }, defaults = ['name', 'id', 'title', 'value', 'class', 'style', 'disabled', 'readonly', 'accesskey'];
        for(var i in defaults){
            if($(this).is(':[' + defaults[i] + ']')){
                attrs[defaults[i]] = $(this).attr(defaults[i]);
            }
        }
        attrs["class"] = (attrs["class"] || "") + " text-input";
        $(this).replaceWith($('<textarea />', attrs).change(function(){
            $(this).val(function(i, v){
                return v.replace(/\n/g, " ");
            }).css("height", $(this).attr("scrollHeight"));
        }));
    });
});

你知道有什么改进吗？

Answer 1

如果按键是“输入”，我很想使用<textarea> 并添加带有 jQ​​uery 的 js 以返回 false。我认为它的重量要轻一些。例如

$('textarea').keypress(function(evt){
  if (evt.keyCode == 13) { return false; }
});

诚然，这不是万无一失的，但您可以添加代码以在 textarea 的值更改时清除其内容。