CODEWITHSUNDEEP
javascripthtmljquery
Usman Khan
Usman Khan

Reputation: 27

Copy paste text area lines limitation jquery

I have created a textarea where user will put their comments comment will be divided by every new line 1 comment per line I want to place a validation that comment cannot be exceeded the provided limit while typing the validation works properly but when it comes to pasting all comments the validation fails it works with keydown but does not work with paste. No matter hwo lines user paste it counts 1 only I want to verify if required comments are 5 and 7 lines are pasted by user it should leave 5 lines and cut the rest of them

here is the below code

$('#custom_comments').keydown(function(e) {
        var lines      = Number($('#comments_required').val());
        var linesUsed  = $('#comments_count');
        var newLines   = $(this).val().split("\n").length;
        var checkError = $('input[name=error_com]').val();

        linesUsed.text(newLines);
        if(e.keyCode == 13 && newLines >= lines) {
            linesUsed.css('color', 'red');
            return false;
        } else {
            linesUsed.css('color', '');

            if( checkError == 'error' ) {
                $('.single_add_to_cart_button').addClass('disabled');
            } else {
                $('.single_add_to_cart_button').removeClass('disabled');
            }
        }
    });

    $('#custom_comments').on('paste change', function(e) {
        var lines      = Number($('#comments_required').val());
        var linesUsed  = $('#comments_count');
        var newLines   = $(this).val().split("\n").length;
        var checkError = $('input[name=error_com]').val();
        console.log(newLines);
        linesUsed.text(newLines);
        if(newLines >= lines) {
            linesUsed.css('color', 'red');
            return false;
        } else {
            linesUsed.css('color', '');

            if( checkError == 'error' ) {
                $('.single_add_to_cart_button').addClass('disabled');
            } else {
                $('.single_add_to_cart_button').removeClass('disabled');
            }
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="_custom_comment" class="input-box textarea-box" id="custom_comments"></textarea>
<div class="comments-box">
  <input type="hidden" name="comments_required" id="comments_required" value="5"> <div class="count-box"><p>Comments used: <span id="comments_count">0</span></p></div>
  </div>

<input type="hidden" name="error_com" value="error">
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">In den Warenkorb</button>

Upvotes: 0

Views: 296

Answers (1)

sandeep joshi
sandeep joshi

Reputation: 2151

try using e.originalEvent.clipboardData.getData('text/plain') to get the data from clipboard object. check snippet for code restricting the user to put more than 5 lines and truncating rest of the lines.

$('#custom_comments').keydown(function(e) {
  var lines = Number($('#comments_required').val());
  var linesUsed = $('#comments_count');
  var newLines = $(this).val().split("\n").length;
  var checkError = $('input[name=error_com]').val();

  linesUsed.text(newLines);
  if (e.keyCode == 13 && newLines >= lines) {
    linesUsed.css('color', 'red');
    return false;
  } else {
    linesUsed.css('color', '');

    if (checkError == 'error') {
      $('.single_add_to_cart_button').addClass('disabled');
    } else {
      $('.single_add_to_cart_button').removeClass('disabled');
    }
  }
});

$('#custom_comments').on('change', function(e) {
  var lines = Number($('#comments_required').val());
  var linesUsed = $('#comments_count');
  var newLines = $(this).val().split("\n").length;
  var checkError = $('input[name=error_com]').val();
  console.log(newLines);
  linesUsed.text(newLines);
  if (newLines >= lines) {
    linesUsed.css('color', 'red');
    return false;
  } else {
    linesUsed.css('color', '');

    if (checkError == 'error') {
      $('.single_add_to_cart_button').addClass('disabled');
    } else {
      $('.single_add_to_cart_button').removeClass('disabled');
    }
  }
});
$('#custom_comments').on('paste', function(e) {
  var lines = Number($('#comments_required').val());
  var linesUsed = $('#comments_count');
  var clipboardData, pastedData;

  // Stop data actually being pasted into div
  e.stopPropagation();
  e.preventDefault();

  // Get pasted data via clipboard API
  clipboardData = e.originalEvent.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('Text');

  var pastedLines = getNumberOfLines(pastedData);


  var checkError = $('input[name=error_com]').val();
  linesUsed.text(pastedLines);
  if (pastedLines >= lines) {
    debugger;
    $(this).val(pastedData
      .split(/\r\n/)
      .slice(0, 5)
      .join("\n"));
    linesUsed.css('color', 'red');
    linesUsed.text(5);
    return false;
  } else {
    linesUsed.css('color', '');

    if (checkError == 'error') {
      $('.single_add_to_cart_button').addClass('disabled');
    } else {
      $('.single_add_to_cart_button').removeClass('disabled');
    }
  }
});

function getNumberOfLines(str) {
  if (str) {
    return str.split(/\r\n|\r|\n/).length;
  }

  return 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="_custom_comment" class="input-box textarea-box" id="custom_comments"></textarea>
<div class="comments-box">
  <input type="hidden" name="comments_required" id="comments_required" value="5">
  <div class="count-box">
    <p>Comments used: <span id="comments_count">0</span></p>
  </div>
</div>

<input type="hidden" name="error_com" value="error">
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">In den Warenkorb</button>

Upvotes: 1

Related Questions