Q&A
今一つ要件が飲み込めてないかもしれませんが「仕様である」というのはどこで確認されたのでしょうか？
下記のコードのpタグは#foo上でクリックしたまま、#barまでドラッグすればどちらも選択した状態になり
纏めてコピーしたい場合等に便利です。
一方でinputタグは同じような動作をさせることができません。
特にinput type="text"をエクセルのようにたくさん並んでいる場合で
エクセルのように纏めてクリックを押したまま、ドラッグして選択範囲のものを全て、一括してデリートすることができれば
直感的に便利な場合があると思います。
実際にはinputタグはクリックした時点でその対象がフォーカス状態になってしまうため、そのフォーカスの範囲
のみでユーザーは操作を許可されており、それ以外の要素をアクティブにする等同時に操作することは出来ないと理解しております。
もちろん、JQueryを利用して、ボタンを用意してクリックすれば纏めて.empty()など一括削除の方法はあるのですが
クリック＆ドラッグで纏めて選択させてデリートを押せば削除させることができるような方法があれば
アドバイスを頂ければと思います。
宜しくお願い申し上げます。
html
1<p id="foo">クリックしてドラッグすると</p> 2<p id="bar">まとめて選択できるよ</p> 3 4<input type="text" name="" id="hoge"> 5<input type="text" name="" id="piyo">
コメントありがとうございます。言い回しが不適切であったことをお詫び申し上げます。クリックしたままドラッグというエクセル的な操作を踏まえると、input textはクリックした時点でフォーカス状態になってしまうため、そのinput text以外の範囲にいくらドラッグしても外に出ることができずフォーカスアウトしない限りは他の要素をユーザーは操作できないという点で仕様という言葉を用いさせて頂きました。
なるほどそういうことですね。こういった技術系のサイトでは「仕様」というと公式ドキュメントにあるものという印象になるため根拠となるソースが必要となるケースがあります。質問内容を調整された方がいいかもしれません。
有難うございます、仰るとおりかと思いますので、質問を修正させて頂きました。
回答1件
0
頑張って矩形選択処理を作りこめば可能です。
mousedown時に座標1を記憶mouseup時に座標2を取得座標1と座標2で囲まれた範囲内の要素を探し出し、それらを配列にでも突っ込むkeyupイベントにハンドラを登録して、deleteかbackspace押されたとき上記の配列に要素があったらそれらのvalueを消す
とかですかね。
投稿2018/09/18 01:35
総合スコア1803
コメント有難うございます。
なるほど、そのようなアプローチもあるのですね。もしかしたら範囲ないで意図しない要素（input以外）も拾ってしまうかもしれないので、そこは分岐で取捨選択すればうまくいきそうです。
貴重なアドバイスを頂き、誠に有難うございます。
あなたの回答
tips
プレビュー
