jQuery -检测剪切/粘贴与文本区自动展开功能

Question

我有一个自动扩展textareawidth和height的函数，但是当我cut或paste的文本区域值时，自动扩展函数不会触发。如何绑定调整大小功能来检测何时粘贴或剪切文本?

$(document).ready(function() {
var $inputs = $(".expandable");
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr("placeholder").trim();
}
var $span = $this.parent().find("span");
$span.text(text);
var $inputSize = $span.outerWidth(true);
$this.css("width", $inputSize);
}
$inputs.find("textarea").keypress(function(e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});
// Backspace event only fires for keyup
$inputs.find("textarea").keyup(function(e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});
$inputs.find("textarea").each(function() {
var $this = $(this);
resizeForText.call($this, $this.val());
});
var textarea = $("textarea");
textarea.on("input", function() {
$(this).css("height", ""); //reset the height
$(this).css("height", Math.min($(this).prop("scrollHeight")));
});
});

textarea {
resize: none;
overflow: hidden;
max-width: 200px;
padding: .9rem;
border: 1px solid #ededed;
border-radius: 6px;
}
.expandable span {
display: none;
margin: 0 12px;
}
.measure {
width: 200px;
background: #ececec;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="measure">200px</div>
<div class="expandable">
<textarea type="text" rows="1" class="textarea" placeholder="Placeholder" autocomplete="off"></textarea>
<span></span>
</div>

Answer 1

我在jQuery插件结构中重写了代码。

示例1

(function($) {
$.fn.expandable = function() {
$this = $(this);
$span = $this.find('span');
function resizeForText(text) {
var $input = $(this);
if (!text.trim()) {
text = $input.attr("placeholder").trim();
}
$span.text(text);
var $inputWidth = $span.outerWidth(true);
$input.css("width", $inputWidth);
$input.css("height", ""); // reset the height
if (text != "Placeholder") {
$input.css("height", Math.min($input.prop("scrollHeight")));
}
}
this.each(function() {
var $textarea = $this.find('textarea');
$textarea.on('input', function(e) {
resizeForText.call($textarea, $textarea.val());
});
// Backspace event only fires for keyup
$textarea.keyup(function(e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($textarea, $textarea.val());
}
});
resizeForText.call($textarea, $textarea.val());
});
}
}(jQuery))
$(document).ready(function() {
$(".expandable").expandable();
});

textarea {
resize: none;
overflow: hidden;
max-width: 200px;
padding: .9rem;
border: 1px solid #ededed;
border-radius: 6px;
}
.expandable span {
display: none;
margin: 0 12px;
}
.measure {
width: 200px;
background: #ececec;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="measure">200px</div>
<div class="expandable">
<textarea type="text" rows="1" class="textarea" placeholder="Placeholder" autocomplete="off"></textarea>
<span></span>
</div>

示例2

这里你可以设置你想要在text后面显示的行数
单行高是calculated通过textareafont-size

(function($) {
$.fn.expandable = function(options) {
$rowsAfterText = (options && options.hasOwnProperty('rowsAfterText')) ? options.rowsAfterText : 1;
$this = $(this);
$span = $this.find('span');
$single_row_height = 0;
$max_width = 0;
function calculateHeight(suggestedHeight) {
if ($rowsAfterText == 0) {
return suggestedHeight - (($single_row_height - 4) * 3);
} else if ($rowsAfterText == 1) {
return suggestedHeight - $single_row_height;
} else if ($rowsAfterText == 2) {
return suggestedHeight;
}
return suggestedHeight + ($single_row_height * ($rowsAfterText - 2));
}
function calculateWidth(suggestedWidth, _strlen) {
if (suggestedWidth < $max_width) {
var width = suggestedWidth + _strlen;
if (width < $max_width) return width;
return $max_width;
}
return suggestedWidth;
}
function resizeForText(text) {
var $input = $(this);
if (!text.trim()) {
text = $input.attr("placeholder").trim();
}
$span.text(text);
var $inputWidth = $span.outerWidth(true);
if (text != "Placeholder") {
$inputWidth = calculateWidth($inputWidth, text.length);
}
$input.css("width", $inputWidth);
$input.css("height", ""); // reset the height
if (text != "Placeholder") {
$input.css("height", calculateHeight(Math.min($input.prop("scrollHeight"))));
}
}
this.each(function() {
var $textarea = $this.find('textarea');
$single_row_height = parseInt($textarea.css('font-size'));
$max_width = parseInt($textarea.css('max-width')) || parseInt($textarea.css('width'));
$textarea.on('input', function(e) {
resizeForText.call($textarea, $textarea.val());
});
// Backspace event only fires for keyup
$textarea.keyup(function(e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($textarea, $textarea.val());
}
});
resizeForText.call($textarea, $textarea.val());
});
}
}(jQuery))
$(document).ready(function() {
$(".expandable").expandable({
rowsAfterText: 0
});
});

textarea {
font-size: 14px;
resize: none;
overflow: hidden;
max-width: 200px;
padding: .9rem;
border: 1px solid #ededed;
border-radius: 6px;
}
.expandable span {
display: none;
margin: 0 12px;
max-width: 200px;
}
.measure {
width: 200px;
background: #ececec;
text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="measure">200px</div>
<div class="expandable">
<textarea type="text" rows="1" class="textarea" placeholder="Placeholder" autocomplete="off"></textarea>
<span></span>
</div>