テキストフィールド用のjQuery autogrowプラグインはありますか？
textareaを自動拡張するためのさまざまなプラグインが見つかりましたが、入力テキストフィールドはありません。誰かが存在するかどうか知っていますか？
これが目的の処理を実行するプラグインです。
[〜＃〜] edit [〜＃〜]：Mathiasのコメントに従ってプラグインを修正しました。 :)
こちらのデモをご覧ください：http://jsfiddle.net/rRHzY
プラグイン：
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
GitHubにjQueryプラグインがあります： https://github.com/MartinF/jQuery.Autosize.Input
ジェームズの回答と同じアプローチを使用しますが、コメントで言及されている変更点がいくつかあります。
ライブの例をここで見ることができます： http://jsfiddle.net/mJMpw/6/
例：
<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />
input[type="data-autosize-input"] {
width: 90px;
min-width: 90px;
max-width: 300px;
transition: width 0.25s;
}
Nice効果が必要な場合は、cssを使用してmin/max-widthを設定し、幅の遷移を使用します。
Input要素のdata-autosize-input属性のjson表記の値として、最後までのスペース/距離を指定できます。
もちろん、jQueryを使用して初期化することもできます
$("selector").autosizeInput();
良いプラグイン、ありがとう！しかし、プロジェクトでうまく機能していると思われる2つのことを変更しました。
- 「メソッドまたはプロパティへの予期しない呼び出し」を回避するために、TESTERタグをDIVに変更しました。 IE8では（デモはIE8で動作しますが、カスタムHTMLタグを使用する特別な理由はありましたか？）
- コードの終わり近くのbindステートメントの後に、check（）の呼び出しを追加しました。これは、起動時にテキストボックスに既にコンテンツが含まれている場合に備えて、ページをロードした直後にテキストボックスのサイズを変更します。
お役に立てれば。
ジェームズの素晴らしいプラグインの小さな改善点を共有したかっただけです。テスター要素のCSS宣言に次のコードを追加して、text-indentを考慮します。
textIndent: 0
これがないと、場合によってはテスター要素が他の場所からtext-indentを不注意に継承する可能性があり、そのため入力のサイズが失われます。
JPと同様に、「trigger（ 'keyup'）」をautoGrowInputメソッド呼び出しにチェーンすることにより、入力を最初から正しいサイズにサイズ変更したいと思いました。
$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');
サイドノートとして、私は純粋にジェームズの解決策についてコメントするためにこのサイトにサインアップしました。何かを見逃した場合は申し訳ありませんが、それは私がこれをジェームズのソリューションにもっと適切にではなく、主な質問へのコメントとして投稿しなければならないことを意味しているようです。
私も交換しました
$(this).bind('keyup keydown blur update', check)
に
$(this).bind('keyup blur update', check).bind('keydown', function() {
setTimeout(check);
});
ブラウザで再レンダリングされた直後にフィールドのサイズを変更するため。それはいくつかのチャタリングからフィールドを取り除きます。
この動作を再現する、テキストタイプの入力用のプラグインを作成しました。他にもいくつかのユニークな機能があります。プラグインの 例 と ドキュメント を見ることができます。 @james回答には、大きなテキストを入力に貼り付ける際に問題があります。それを修正するために、私は彼のコードにいくつかの修正を加えました。この例では デモ です。
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 200,
minWidth: 1,
comfortZone: 1,
width: 1
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
maxWidth = o.maxWidth,
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = testerWidth + o.comfortZone,
currentWidth = input.width();
if (testerWidth < minWidth) {
newWidth = minWidth;
} else if (testerWidth > maxWidth) {
newWidth = maxWidth;
}
input.width(newWidth + o.comfortZone);
};
testSubject.insertAfter(input);
$(this).bind('input', check);
});
return this;
};
})(jQuery);
input-autogrowというプラグインを作成して、自分のプロジェクトでこの問題を解決しました。このプラグインはもともとJamesの回答に基づいていましたが、多くの点で改善されています。
https://github.com/westonganger/input-autogrow
input-autogrowは入力を自動拡張するためのプラグインです。このプラグインは他のプラグインとは異なります。これは、ほとんどの場合、textareaタグを対象とするため、このライブラリは代わりに入力タグを対象とするためです。 jQuery、Zepto、または$ .fnプラグインをサポートするものなどのDOMライブラリが必要です。
以下に使用例を示します。
/* Makes elements readonly if they already have the readonly attribute */
$('input.autogrow').inputAutogrow();
/* Manually trigger update */
$('input.autogrow').trigger('autogrow');
/* or */
$('input.autogrow').trigger('change');
/* Custom Options */
$('input.autogrow').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10});
/* Remove autogrow from input */
$('input.autogrow').inputAutogrow('destroy');
その中の文字列がその幅を超えて伸びるときにテキストボックスを拡大したい場合、おそらくこのような何かがあなたのために働くでしょう...それはテキストボックスのサイズ属性を検出します。文字列の長さがその属性を超える場合、キーアップで文字列の長さまでテキストボックスを拡張します。
以下のスクリプトでは、「＃test」はテキストボックスIDです。
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#test").keyup(function(){
if($("#test").attr("size") < $("#test").val().length){
size = $("#test").val().length;
$("#test").attr("size",size);
}
})
});
</script>
素晴らしいプラグインジェームス！ありがとう。私は非常に効果的ですが、最後にJPによるチェックの提案を追加しました。
また、私は私の側にいくつかの変更を加えました。変更された幅がmaxWidthを超えた場合、入力のサイズを最大サイズに設定したかったので追加しました：
else if (widthexceeds){
input.width(o.maxWidth);
}
isValidWidthChangeのifチェックの下で、widthexceeds = newWidth > o.maxWidth
IE overflow：visibleは非常に深刻です。入力要素にoverflow：visibleを適用することにより、この効果を実現できます。同様のCSSトリックが最新のブラウザーに存在するかどうかはわかりません。