Question

想知道是否有可能创建一个简短而简单的跨浏览器jQuery（1.6）函数，它可以通过保留小于#textarea1限制的字符来将var maxlength内容分成两部分。转移maxlength中超过#textarea2限制的剩余字符。 #textarea1在#textarea2内编辑了移动 exhereant，如果用户删除了#textarea1中的某些文字，则#textarea2中的最高内容会移至底部 - 结束#textarea1 。可选的参数控制器通过复选框触发，只允许文本从#textarea1流向#textarea2。我刚刚开始研究jQuery的表面，但我注意到this simple javascript can nearly do the trick，减去了自由流动的角色运动。 jQuery Columnizer from Wulf也可能是一个起点，在这个问题上摸不着头脑。对于任何帮助都是一堆。 DC

Answer 1

好的，如下所示。调用catchOverflow()在指定字段上设置更改处理程序，并指定maxChars; overwrite param控制复制到第二个textarea的更改是否会覆盖已存在的更改或添加到结尾。

function catchOverflow(f1Selector, f2Selector, maxChars, overwrite) {
   var f2 = $(f2Selector);
   $(f1Selector).change(function() {
      var val1 = this.value;          
      if (val1.length > maxChars) {
         f2.val( (overwrite ? "" : f2.val()) + val1.substr(maxChars) );
         this.value = val1.substr(0, maxChars);
      }
   });
}


catchOverflow("#textarea1", "#textarea2", 250, false);

编辑：很容易在上面添加更多代码，以测试第一个字段的长度是否小于最大值，如果是，则复制maxChars - val1.length字符从开头第二个领域。我相信你可以根据我已经给你的东西来解决这个问题。

Clipboard events在Opera中不起作用，这就是为什么我刚刚在上面的原始代码中处理了change事件。但是如果你想要你也可以尝试捕获剪贴板的东西，并捕获keyup和mouseup以期在发生所有变化时获取。在某些浏览器中，mouseup可能会为您捕获拖放。

在上面的代码中改变了这个：

 $(f1Selector).change(function() {

到此：

 $(f1Selector).on("change keyup mouseup cut paste", function() {

Answer 2

下面的代码（jQuery 1.6.1）反映了我的直接需求，但我想更改它，以便当myLength超过20时，多余的文本将移到前面（没有副本）包含的文本在 mytextbox2 中。目前，每当 mytextbox1 中的内容超出限制时，代码会重新创建包含多余文本的新文本区域，这是我不想要的。它必须只创建 mytextbox2 一次，并以上述方式从 mytextbox1 接收未来的多余文本。在此示例中，在页面刷新 mytextbox2 并且其内容丢失后，此类内容也永远不会通过表单发送，它只是作为多余文本的临时占位符：

$('#mytextbox1').live('keydown keyup mouseup cut paste', function(event) {
var myLength = $('#mytextbox1').val().length;

    if (myLength > 20) {
        var words = $(this).val().split(' ');
        var last_word = words.pop();
        var reduced = words.join(' ');
        $(this).val(reduced);
        $(this).css('height', '65px');
        $(this).after('<textarea id="mytextbox2"></textarea>');
        $(this).next().focus().val(last_word);
   }    
});

如果代码可以更精简，对我当前的主要浏览器更有效，请提出您的建议。我们还应该使用.live方法吗？为了这个功能的目的，我会把这个留给你。很多帮助，它帮助我平缓了学习曲线。

将textarea内容分成两个最大长度，并在另一个文本区域中流动超出内容

2 个答案: