<input type =“text”/>换行

我很想显示文本输入，但如果文本太长，它们应该会中断。但是用户不应该能够自己插入新的行。原因是我总是希望能看到整个值。<input type =“text”/>换行

我认为没有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")); 
     })); 
    }); 
});

你知道任何改进？

来源

2011-08-26 YMMD

您没有权限访问后端代码吗？我会在后端用textareas替换输入元素。 –

是的，我愿意，但对我来说，更换客户端似乎更好。因为如果有人禁用JavaScript，他就会知道他不会输入换行符。 – YMMD

我会试图使用<textarea>并添加js w/jQuery，如果按键是'enter'，则返回false。我认为它的重量更轻。例如。

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

诚然，这不是傻瓜证明，但你可以添加代码来擦洗时，其价值变动textarea的内容。

来源

2011-08-26 20:47:49 JellicleCat

多么辉煌的答案，非常感谢！这对我来说似乎更优雅。它遗憾地仍然没有解决我如何创建textarea属性的方式。你也有这样的建议吗？（： – YMMD

我很难理解你在attrs和defaults中做了什么，你可以向我解释一下吗？ – JellicleCat

当然是的！我希望textarea具有输入的所有属性，所以现在我遍历一个属性名称列表，如果存在这样的属性，将其复制到我的新textarea元素中，这对我来说似乎不是很直接，如果我能一次捕获所有属性会好得多 – YMMD

<input type =“text”/>换行

回答

相关问题