with line wrap

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>并添加js w / jQuery如果按键是'enter'则返回false。我觉得它的重量要轻一些。例如。

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

不可否认，它不是万无一失的，但是当它的值发生变化时，你可以添加代码来擦除textarea的内容。