1

私は初期サイズのテキスト入力を持っています.2と言います.私が欲しいのは、入力するとサイズが同時に拡大し(テキスト入力の境界線のために表示されます)、ユーザーがバックスペース/削除を押すと同時に減少することです.文字を消去します。私はこのコードで試しています:

$("input").live("mouseup mousedown keyup keydown",function() {
x = parseInt($(this).attr('size'));
y = $(this).val().length;
z = x > y ? y : x;
$(this).attr('size',z+2);
});

これで、このコードは、ユーザーが一度に 1 文字ずつ入力するか、文字キーを押し続けたときに、期待どおりに機能します。どこかからテキストのチャンクをコピーし、テキスト入力に焦点を合わせ、CTRL-V を使用するか、右クリックして [貼り付け] オプションを選択して貼り付けると、問題が発生します。45 W のストリングでテストしています。何が起こるかというと、テキスト入力が少しだけ拡大され、そのまま維持されます (したがって、表示される W はわずかです)。クリックするまで、もう少し拡大しません。その後 2 ～ 3 回クリックすると拡大し、最後にフルサイズに拡大します。もう 1 つの風変わりな点は、その逆が当てはまらないことです。入力に集中し、CTRL-A を実行してテキスト全体を選択し、バックスペースを押すと、すべてのテキストが消えると同時にサイズが元のサイズに縮小されます。なぜこれが起こっているのか誰でも説明できますか？また、テキストのチャンクが貼り付けられたときに同時に自動展開するにはどうすればよいですか?

4

4 に答える 4

1

次のように'editable' を使用してみることができますdiv。

css :

div.input{
   display:inline-block; 
   border:1px solid; 
   background-color:white;
}

<em>マークアップ:

<div class="input" contentEditable="true">Type here...</div>​

デモ→ こちら

于 2012-06-22T08:41:19.147 に答える
0

代わりに、イベントpropertychange（IE）および（その他）を使用してください。input

于 2012-06-22T08:50:09.060 に答える
0

もう1つのトリックは、おそらくより相互互換性があり、タイマーを使用してチェックをトリガーすることです。

于 2012-06-22T08:50:56.677 に答える
0

代わりに、同じように機能.live("mouseup mousedown keyup keydown")するイベントを使用し、.change()おそらく CTRL+V の変更もキャッチします。

于 2012-06-22T08:43:17.450 に答える