我创建了一个文本区域，用户将在其中放置他们的评论 评论将除以每行 1 条评论 每行我想进行验证，即在键入验证时不能超过提供的限制，但在粘贴所有内容时评论 验证失败 它适用于 keydown 但不适用于粘贴。无论用户粘贴多少行，它都只计为 1 我想验证所需的评论是否为 5 行，用户粘贴了 7 行它应该留下 5 行并剪切其余的行
这是下面的代码
$('#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>尝试使用 e.originalEvent.clipboardData.getData('text/plain')从剪贴板对象获取数据。检查代码片段以限制用户放置超过 5 行并截断其余行。
$('#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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句