+ JavaScript の質問用スレッド vol.124 +

■ このスレッドは過去ログ倉庫に格納されています
2021/11/10(水) 15:24:24.80ID:jxD2VXPG0
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
  (ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
  具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
  わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
  ※必ず「問題の事象が再現されること」を確認してください。
   必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured
329231 (スプッッ Sd03-Ylb5 [1.75.198.160])
垢版 |
2022/01/15(土) 15:58:17.33ID:+L4WFDi5d
>>327
自分もそのサイト参考にしたいんですが、おま環かわからないんですが、よくフリーズするんですよ。
今繋げたんですが、やっぱりこうなりました。

https://i.imgur.com/mBDXebU.jpg

>>328
アドバイスありがとうございます。
とても助かりました。
2022/01/15(土) 23:03:48.55ID:gRCv6ifL0
>>329
こういうと元も子もないないけど、
初学者なら一回ちゃんとPC環境で落ち着いて開発した方が良くないか?
PC版開発⇒Android環境で動作するようにテスト&修正っていう方がやりやすいぞ
(MDNのサイトをAndroidで見てる辺り、ちょっと開発環境が気になった)
2022/01/15(土) 23:42:23.10ID:iJzr35B10
>1 に書いてある、
>(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。

たぶん、これは元々無かったのに、荒らしが勝手に入れた。
荒らしはテンプレを勝手に改変して、自分が有利な話題だけに絞る。
自分が嫌な話題をさせないように邪魔する

荒らしは必ず、2回以上書き込んで複数人いるように思わせる。
それで、議論を自分が有利な方向へ持っていく

Python のすべてのスレのテンプレも、荒らしが改変している。
>・当スレにRubyのソースコード類を書くことを禁ず
>・Ruby等、Pythonではないプログラミング言語での回答類・質問を書くのも禁止
>・「Ruby では」「Rubyでは」「Rails」正規表現→「^クソチョンw$」をNGワード登録推奨

テンプレ荒らし。
ずっと、荒らしがスレを立てて、テンプレを毎回改変してくる

それをそのまま使っちゃいけない。
必ず削除するか、別のスレを立て直す

この辺の対策は、漏れらは散々やってきた
2022/01/15(土) 23:53:50.82ID:6cYxC8yoM
そこでつまづいてるならライブラリ使った方がいいと思うぞ
一応コピペしたら使えるlocalforageのテストコード貼っとくから
あくまでテストコードだからPromise.allとか使ってないけど
https://pastebin.com/f5FtchSD
2022/01/16(日) 01:28:59.06ID:RG8YDX1E0
初心者は、Ruby, jQuery, Lodash みたいな簡単な言語・ライブラリなどを使うと、
時間を削減できて、その分を勉強に回せる

だから荒らしは、それを出来ないように制限してくる。
初心者が勉強して上達するのが嫌なんだろう。
自分が不利になるから

それで、あちこちのスレで、ずっとRuby, jQuery, Lodash 禁止のテンプレを作っている。
漏れらは散々、それらの荒らしと戦ってきた
2022/01/16(日) 02:54:37.36ID:v/bsDKuq0
どの言語でもRubyをゴリ押しするアホが居たからだろ。
2022/01/16(日) 03:56:51.32ID:tdI2bixr0
RubyガイジがRubyスレ以外の言語で現れるからだろ
しかも質問に対して「Rubyでは〜」って言ってRubyのコード貼り付けるし
言い方が悪いけど、Ruby布教したいなら大人しくRubyスレだけでやってくれよ
2022/01/16(日) 06:23:17.74ID:69vcad0C0
何でネットに仲間意識があるんだろう?
不思議だな、リアルに仲間が居ないのか?
2022/01/16(日) 06:38:19.21ID:Lkv6MjG/0
前も言ったがrubyスレでpythonの話してもいいっていうなら考える余地がある
現状自分に都合のいい事押し付けてるだけ
2022/01/17(月) 01:32:28.96ID:2Ob1kDrm0
element.addEventListener(

"toucstart",
function(e){

setTimeout(

function(){

document.addEventListener('touchmove', disableScroll, { passive: false });

}
,
2000

);

}

);

function disableScroll(e) {
e.preventDefault();
}

elementを2秒以上タッチしたらスクロール禁止にしたいんだけどうまくいきません
どうすればいいんですか?
339デフォルトの名無しさん (ワッチョイ cd10-76Y4 [180.12.82.129])
垢版 |
2022/01/17(月) 01:33:54.40ID:2Ob1kDrm0
訂正:touchstartです
2022/01/17(月) 01:52:23.96ID:fRpijKvH0
長押しか

Lodash に、そういう関数が無いか?
2022/01/17(月) 02:08:44.57ID:HXNtZOIm0
>>338-339
touchstartとtouchendのタイムスタンプの差分が2秒以上か確認すれば良い
setTimeoutは不要
342デフォルトの名無しさん (ワッチョイ cd10-pleP [180.12.82.129])
垢版 |
2022/01/17(月) 08:35:06.65ID:2Ob1kDrm0
>>341
2秒以上押している間処理実行という場合はどうしたらいいんですか?
2022/01/17(月) 11:30:42.13ID:HXNtZOIm0
>>342
「toucstartからtoucendまでの間」が押している間
344デフォルトの名無しさん (ワッチョイ cd10-pleP [180.12.82.129])
垢版 |
2022/01/17(月) 12:20:33.86ID:2Ob1kDrm0
>>343
touchendだとタッチを離さないとだめなので
タッチを離さないで2秒以上押しっぱなしという意味です
2022/01/17(月) 12:35:37.47ID:46yYb1/oM
だからtouchstartから2秒以内にtouchendが無ければ長押し判定でしょ
2022/01/17(月) 13:25:59.68ID:HXNtZOIm0
>>344
touchstartで処理を開始し、touchendまたは2秒後に処理を停止すれば良い
ボインタ位置も見るならtouchmoveで別の場所に移動した時にも処理を停止すれば良い
2022/01/17(月) 14:12:06.81ID:KLYqBwLr0
スクロール始まる前のtouchmoveならpreventDefaultでスクロール禁止できるけど
一旦スクロール開始しちゃったら後のtouchmoveでpreventDefaultしてもスクロールキャンセルできない臭い
2022/01/17(月) 14:43:40.87ID:/IOfqNlx0
>>338
こゆこと?
指がtouchstartから2秒以上同じ位置に停止していた場合、その後touchend(指を離す)までに発生したtouchmove(スクロール)を中止する。

var element = document.getElementById('element');
let timer, flag = false;
element.addEventListener('touchstart', function(event) {
timer = setTimeout(function() { flag = true; }, 2000);
});
element.addEventListener('touchend', function(event) {
timer = clearTimeout(timer);
flag = false;
});
document.addEventListener('touchmove', function(event) {
if (flag) { event.preventDefault(); }
else if (timer) { timer = clearTimeout(timer); }
}, {passive:false});

>>347
touchmoveが一旦開始すると以降キャンセル不可になるみたいだな
349デフォルトの名無しさん (ワッチョイ cd10-pleP [180.12.82.129])
垢版 |
2022/01/17(月) 18:08:34.74ID:2Ob1kDrm0
>>344
if(touch_end_time - touchi_start_time >= 2){関数呼び出し}ってことかな?
>>346
なるほどー
>>348
だいたいそういうことです
2022/01/17(月) 18:35:14.87ID:S5612HsoM
touchstartでグローバル変数にsetTimeoutを格納した上で、touchendでclrarTimeoutすれば、clearされない場合にのみdisableScroll()が実行される
2022/01/17(月) 20:48:15.45ID:n9KL/cV4a
同じ要素が複数あるときに、スクロールした場所だけにactiveを付与する方法ってないでしょうか?

例えば、pタグが等間隔に10個ほど並んでいて、その場所までスクロールしたらそのタグだけにaddClassを実行。それをスクロールする度に実行するという感じです。

該当のタグ全てに連番でclassを振るという方法から始めてみましたが、「今スクロールが到達しているpタグだけにaddClass」という
振り分けが分からず苦戦しております。
どうかお知恵をお借りできたら嬉しいです
2022/01/17(月) 21:02:08.36ID:KLYqBwLr0
>>351
IntersectionObserver
2022/01/17(月) 23:24:28.34ID:fRpijKvH0
「javascript スクロールしたら表示」で検索!

jQuery のscrollTop() を使うのかな?
2022/01/17(月) 23:52:07.20ID:sHRIiBJ+0
>>352-353
どうもです。

>>353
一応それやってみてるんですけど、その方法だと対象のセレクターが複数ある時に使えなくて・・・
2022/01/18(火) 16:54:34.98ID:k8xAul1v0
ユーゲンガルグ関数がわからん。
356デフォルトの名無しさん (スフッ Sd03-oY3f [49.106.200.84])
垢版 |
2022/01/18(火) 17:00:08.36ID:qIbLvF83d
めちゃくちゃ素人質問で申し訳ないんだけど複数のbuttonがある状態で押されたボタンのvalue要素を取得する事ってできる?
他との問題でボタンにidを付与出来ないからclassとnameを使ってなんとかしようとしてたんだけどサッパリわからん……
2022/01/18(火) 18:05:16.94ID:LpXG9iMK0
>>356
event.target.value
2022/01/18(火) 18:14:12.29ID:i9X1I8m+0
>>356
this.value
2022/01/18(火) 19:33:28.72ID:J9BuAn5e0
javascriptでマウスクリックできますか?
2022/01/18(火) 20:52:58.76ID:LpXG9iMK0
>>359
ボタン等の特定要素にはclickメソッドがある
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click

clickイベント発火でよければ
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent
2022/01/18(火) 22:37:22.43ID:JAqSdPQV0
>>354
>対象のセレクターが、複数ある時に使えなくて

HTML,CSS,Javascript スクロールしたらふわっと表示(jQueryなし)
https://notetoself-dy.com/javascript-scroll/

このサイトでは、すべてのup クラスが付いた要素を、
1つずつループして、show クラスを付けている

<div class="up op">表示1</div>
<div class="up op">表示2</div>
2022/01/20(木) 21:45:57.61ID:RhIW6qPa0
javascriptで特定のクラス内の文字列をカットしたいです。
.containerの子要素である、.textをターゲットにしたいです。


しかし、container外にも.textがある可能性も考えられます。
ターゲットをcontainer内に絞るには、どんな関数を組めばいいでしょうか?
https://jsfiddle.net/bgegg/gf324bha/2/
2022/01/20(木) 22:05:50.35ID:NuVLsXYX0
function textCutting(selector) {
const limited_number = 7;
document.querySelectorAll(selector).forEach(node => {
node.textContent = node.textContent.trim().substr(0, limited_number);
});
}

textCutting("#container > .text");
2022/01/21(金) 19:52:13.30ID:rIwZ3iU60
>>363
ありがとうございます。返信忘れてました。

引数にcontainerを入れておきたいのですが、クラスである場合もあります。
クラスかidどちらでも取ってこれる関数ってありましたか?
2022/01/21(金) 19:59:06.53ID:SSxUhBiBM
>>364
釣りなのか?
2022/01/21(金) 20:07:10.92ID:9UlpI2W40
>>364
コードの関数名でぐぐって調べないからそういう質問がでてくる >querySelectorAll
2022/01/21(金) 20:35:43.67ID:rIwZ3iU60
そうでした すみません

上の例でいうselecterは親要素のセレクタのことだったんですね
2022/01/21(金) 21:49:18.45ID:g1zNjN8q0
一次配列をmatchメソッドみたいに正規表現で検索して、適合するすべての値を返すのってどう書けばいいんですか?

[ あ,い,う,え,お,あか,いし ] ←この配列を/[あい].*?/で検索して[ あ,い,あか,いし ]みたいな結果を得たい
joinメソッドで文字列化してmatchメソッドつかわずに「一次配列を検索」したいんです
2022/01/21(金) 21:55:09.36ID:b7lSBqdq0
>>368
["あ","い","う","え","お","あか","いし"].filter(s => /[あい].*?/.test(s));
2022/01/21(金) 21:57:35.84ID:9UlpI2W40
>>368
filterとtest
2022/01/21(金) 22:12:34.42ID:g1zNjN8q0
>>369
>>370
おおおお!ありがとうございます助かりました
2022/01/22(土) 14:09:45.81ID:NNleZLfU0
要素内から複数の要素(例えば同じクラス名を持つ要素)などを取ってくる場合、htmlcollectionとnodelistのどちらを使うんでしょうか?
どちらということはなく、nodelistの下位にある構造がhtmlcollectionかなとも考えています。
2022/01/22(土) 14:12:22.41ID:tKSIbGor0
>>372
liveかそうでないかを意識すれば、どちらでも良い
プロパティ、メソッドも少し違う
2022/01/22(土) 14:44:09.28ID:NNleZLfU0
https://ideone.com/vndbec
https://i.imgur.com/8k3fQ2F.jpg

まず親要素を取り、その後子要素にアクセスしようとしたんですが、foreachは使えないみたいです。
childrenが配列になっていないからかなと思うんですが、インスペクタ見ると配列にはなっているようですが、なぜでしょうか?

>>373
ではhtmlcollection使うことにします。なんとなくとっつきやすかったので。
2022/01/22(土) 14:58:17.72ID:tKSIbGor0
>>374
HTMLCollectionは配列じゃない
forEachも持ってない
使えるメソッドとプロパティを確認すること
2022/01/22(土) 15:34:49.54ID:SQae85PjM
childrenに格納されているhtmlCollectionにはforEachメソッドがないので、下記のように書く必要がある
[...children].forEach()
2022/01/22(土) 15:50:34.18ID:NNleZLfU0
>>375
nodelistに使うものですよね。ありがとうございました。

>>376
ふつうにlengthとってforで回してもいいんですよね。
ソッチのほうが直感的にわかりやすいかなと。
2022/01/22(土) 15:56:19.54ID:NNleZLfU0
>>376
これは何という記述ですか?
ただの、配列化でしょうか?
2022/01/22(土) 16:13:03.92ID:LEmRhRzh0
>>378
スプレッド構文
2022/01/22(土) 16:45:48.19ID:NNleZLfU0
>>379
どうも、見慣れない記述だったので。
こういうのはふつうにforループ回したほうがわかりやすいんでしょうか?
javascript特有の記述というのが難しくて
2022/01/22(土) 16:57:04.97ID:cpTU2V8CM
特別な理由がない限り、letやforの利用を控えることをオススメする
無意味な状態や副作用をできるだけ排除する構成を心がけよう
2022/01/22(土) 17:05:10.48ID:tKSIbGor0
>>380
あなたは「何を使うべきか」よりも「どんな機能なのか」を把握することから始めた方が良い
NodeListとHTMLCollectionの選択でHTMLCollectionを選択したかと思えば、HTMLCollectionを理解してないから使いこなせない
理解する前に選択するからそうなる

俺はHTMLCollectionではfor文を使ってるが、特徴を理解していれば何の問題もない
NodeListならfpr-ofを使ってもよい
理解さえしていれば、自ずと選択が出来る
NodeList、HTMLCollection、スプレッド構文、..,etc を理解してから悩むべきだ
2022/01/22(土) 17:07:49.25ID:tKSIbGor0
× NodeListならfpr-ofを使ってもよい
○ NodeListならfor-ofを使ってもよい
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of
2022/01/22(土) 17:17:07.24ID:JjDEqDMvM
>>381
普通のforで回すよりfor...inとかfor...ofで回した方が要素すぐ扱えて記述少なくて済むのは置いといて
letはvarより使わない方が良いの?
それともforのインデックス用の i を使わない方がシンプルで良いという限定的な条件での話?
2022/01/22(土) 17:27:40.96ID:tKSIbGor0
>>381
副作用の話は俺も分からなかった
for文に副作用があるとは思えないが
2022/01/22(土) 17:37:01.92ID:cpTU2V8CM
>>384
現状のvarは「互換性のために残されている」のであって、利用禁止が大前提
その上で、どうしてもconstにできない特別な理由がある場合にだけletを使うってこと

さらにその延長で、forについても使わずに済むなら使わない方が良いってこと
2022/01/22(土) 17:56:17.90ID:QY+Rk2d60
letもforもどんどん使いなさい
2022/01/22(土) 17:59:22.62ID:tKSIbGor0
理由不明な禁止ルールを受け入れるようになると、赤の他人の意見を鵜呑みにしておかしなことになるからお勧めはしない
非推奨理由を読んで、受け入れるか判断するのがいいと俺は思う
2022/01/22(土) 19:12:13.08ID:a9ljOduXa
>>386
なるほど了解。
普通のforで回して処理するよりsomeとかreduceとかのほうが何の処理しようとしてるかわかりやすいしね。
varはブロック内からでもグローバル変数になるからどこから変数内容変更されてるか分かりにくくなり易いから良くないね
2022/01/22(土) 19:44:53.36ID:NNleZLfU0
>>382
はい
2022/01/22(土) 19:52:02.18ID:NNleZLfU0
ややこしいのでfor文使うようにします(´・ω・`)、、、
2022/01/22(土) 19:57:06.18ID:NNleZLfU0
あっ、for of いいですね。
htmlcollectionでなぜforeachが駄目なのか謎ですが。
2022/01/22(土) 20:26:37.27ID:NNleZLfU0
vscodeについて質問です。
javascriptの補完は完全ではないのでしょうか?
以下のコードのtextContentの部分は候補に出ません。

https://ideone.com/VWu28k
2022/01/22(土) 20:44:09.65ID:DzShGNE/M
ここはvscodeスレじゃない
一応答えておくとjavascriptは動的型付けなので常に補完が出る訳じゃない
そういうのを求めてるならtypescriptを使う
2022/01/22(土) 20:47:52.03ID:yE/sDV/tM
今回は「使えないみたいです」って聞き方ではないのねw
MDNをよく読んだ上で、実際にどう動くのかをブラウザのコンソールで繰り返し施行するといい
2022/01/22(土) 21:59:01.76ID:0B2OkF2o0
>>392
HTMLCollectionはArrayのPrototypeを持ってないからforEachはつかえない。
HTMLCollectionでforEachを使いたいなら、Array.Prototype.forEach.callとか。
2022/01/23(日) 09:03:46.77ID:ltsaqaCQ0
>>396
どちらも配列だと思うんですが、なぜhtmlcollectionだけ使えないのかが分かりません
2022/01/23(日) 09:04:54.18ID:ltsaqaCQ0
javascriptを書くとき、関数名などに続けて波括弧を書いたほうがわかりやすいと思いますか?

function func(){

console.log("hoge");

}
以下のようにしたほうが構造が分かりやすくないですか?

function func()

{

console.log("hoge");

}
2022/01/23(日) 09:10:19.94ID:pqnTeOnra
JavaScriptで配列とはArrayのこと
"配列っぽい"ことと"配列である"ことは全然違う

逆に聞くけどどうやって両方配列であると判断したの?
2022/01/23(日) 09:20:24.21ID:qS6ibVNz0
>"配列っぽい"ことと"配列である"ことは全然違う

初めてやる人にはそんなこと思いもよらないだろうしな
2022/01/23(日) 09:21:45.33ID:ltsaqaCQ0
>>394
そういうものなのですか。
補完が出ないとちと不安で
2022/01/23(日) 10:15:35.55ID:h5wOxsBg0
>>398
配列とは new Arrayもしくは [] のこと
new ArrayでforEachを使えるのはプロパティ参照時に Array.prototype.forEachを参照するから
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
プロトタイプチェーンを理解すべき
https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
2022/01/23(日) 10:16:08.20ID:h5wOxsBg0
>>399
いわんとすることは分かるが、厳密にはArrayは配列ではない
new ArrayをArrayと書くと誤解を招く
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
404デフォルトの名無しさん (ワッチョイ 4bdb-4V6Q [217.178.96.78])
垢版 |
2022/01/23(日) 11:26:44.19ID:cv61Nq9M0
>>399
https://youtu.be/sg6pJzAZbqk?t=1504
2022/01/24(月) 05:35:59.89ID:VeWznQkJ0
>>362
.container の子要素(子孫を含めない・直下のみ)である、.text は、.container > .text

親と子を、別々に取得するなら、jQuery で、

<div class="aaa">
<div class="xxx">ああ</div>
<div class="yyy">いい</div>
<div class="xxx">うう</div>
</div>

<div class="aaa">
<div class="xxx">111</div>
<div class="xxx">222</div>
</div>

const parents = $( '.aaa' )
// 子の中で、xxx クラスのものだけを取得する
const children = parents.children( '.xxx' )

children.each( function( ) {
console.log( $( this ).text( ) )
} );

これで、ああ・うう・111・222 が表示されて、
「いい」だけは表示されない

初心者は、素のJavaScript(JS)で書かずに、jQueryを使った方がよい。
JSで書くと、可読性も悪いし、バグってばかりで時間を損する
406デフォルトの名無しさん (ブーイモ MMb9-Hf9d [210.138.176.169])
垢版 |
2022/01/24(月) 07:11:58.20ID:bR7FKfqoM
ハゲは、素のjQueryで書かずに、Javascript(JS)を使った方がよい。
jQueryで書くと、プログラミングの本質が理解できていないままだし、ハゲてばかりで毛を損する
407デフォルトの名無しさん (ワッチョイ cd33-4V6Q [58.188.87.43])
垢版 |
2022/01/24(月) 17:37:07.00ID:LBRFFVWL0
初心者こそjQuery使わずに書くべき
408デフォルトの名無しさん (ワッチョイ 9510-NoeV [180.12.82.129])
垢版 |
2022/01/25(火) 18:13:09.23ID:xKqTlXah0
element.addEventListner(
"click",
function(e){
clearInterval(timer_id);
var timer_id = setInterval(test_func,1000);
}
);
このようにクリックしたとき前回起動したsetIntervalを削除して
新しいsetIntervalをセットしたいんだけど、前回のtimer_idが取得できないのでうまくいきません
どのようにすればできますか?
2022/01/25(火) 18:53:59.98ID:d2MfevVf0
>>408
handleEventプロパティを持つオブジェクトにタイマーidを保存する
2022/01/25(火) 20:54:59.74ID:MGjq+ZUh0
JavascriptってJavaより簡単って聞いたけど、html絡んでくるから難しくないですか?
2022/01/25(火) 21:56:30.40ID:Il9sj+JJM
>>408
下記のようなグローバルオブジェクトを定義しておいて、その要素として保持しよう

const timer = {}:
412デフォルトの名無しさん (ワッチョイ 9510-i5gI [180.12.82.129])
垢版 |
2022/01/25(火) 22:43:16.96ID:xKqTlXah0
>>409>>411
できましたありがとー

また質問だけどsetIntervalとwindow.scrollByを使って自動スクロール中に
手動でスクロールするとclearIntervalで自動スクロールを止めるようにしたいんだけど
自動スクロールも手動スクロールもaddEventListner("scroll",function(e){})が発動して
区別をつけることができないんだけどどうすればいいですか?
2022/01/25(火) 23:01:22.01ID:5lVpkzkKr
>>410
WebAPI使わなければいいんでない?
2022/01/26(水) 01:23:00.34ID:I/6zw4/PM
>>412
e.isTrusted で区別できるかも
415デフォルトの名無しさん (ワッチョイ 9510-i5gI [180.12.82.129])
垢版 |
2022/01/26(水) 12:30:28.07ID:XmTyDG1O0
>>414
やってみたけど自動でも手動もでtrueだったので判別できませんでした
2022/01/26(水) 12:40:07.38ID:9OS9fT5f0
>>412
自動スクロール中のフラグを作成して、フラグ管理すれば良い
2022/01/26(水) 13:12:16.31ID:bkHBqHOK0
>>412
wheel, mousedown、keydownイベントで止めるとか
2022/01/27(木) 11:57:20.38ID:ZSUaXKzX0
>>417
mousedownはオート・スクロール・モードのことか
https://atmarkit.itmedia.co.jp/fwin2k/win2ktips/759autoscroll/autoscroll.html

2アクション必要だから、モード検知がやや複雑化しそうだな…

---
自動スクロールを検知して、自動スクロール以外を手動スクロール扱いする方向で考えてた
これなら、キーバインド変更されても対応出来る
2022/01/29(土) 02:18:01.02ID:/eUfBI510
oninput="value=value.replace(';','1')"

置換元が特定の全角記号(¥:;@等)の場合、置換先の文字が2回入力されます。
書き方の問題ですか?回避方法はありますか?

chromeとedgeで発生しました。
ieでは発生しませんでした。
2022/01/29(土) 03:13:10.90ID:wMUjEsRbM
KeyboardEvent.isComposingで変換中か判定したらいい

<input id="test">

const elm = document.querySelector("#test");
elm.addEventListener("keyup",(e)=>{
if(!e.isComposing){
elm.value =
e.target.value.replaceAll(";","1")
}
})
2022/01/29(土) 09:47:04.60ID:/uVNTTXR0
>>410
JavaScriptは初心者向けの簡易言語。
422デフォルトの名無しさん (ワッチョイ 13b1-21ac [123.1.38.203])
垢版 |
2022/01/29(土) 23:21:16.05ID:vLNLUfHR0
一応入門書を一通り終えたのでelectronでGUI作ろうと思ったら、予想以上に難しくて挫折した。
electron使いの人いる?
いたらどれだけのレベルにならないと作れないか教えて。
2022/01/30(日) 00:53:12.46ID:8AeUKyTB0
>>419
Node.js で実行したら、1回しか置換されない

inText = 'あい;;ab;;12';
outText = inText.replace(';', '1');

//=> あい1;ab;;12
2022/01/30(日) 02:04:42.24ID:acbp/SqRa
>>422
俺はelectron使いじゃないけど今本屋に並んでる2022年3月号の日経ソフトウエアでElectronでデスクトップアプリ開発特集載ってたよ
2022/01/30(日) 12:10:56.23ID:5V9R/BtT0
>>420
これだと普通に置換できますね

>>423
環境によるんですかね

結局こうしました。半角の数字と半角のコロンだけ表示。
.replace(/[0-9:]/g,s => String.fromCharCode(s.charCodeAt(0) - 65248)).replace(/[^\:\d]/g,'').replace('::',':');
最後に[::]→[:]
変なやり方だと思うけど:を二回使う事は無いのでとりあえずOK

replaceどうのこうのではなくて、oninputが2回実行されてるみたいです。
oninput="value=value + 'あ'"
特定の全角記号だと「;あ;あ」、全角英字なら「;あ」
2022/01/30(日) 12:57:51.16ID:hMKxlwO1a
querySelector
で帰ってきたelementのメソッドでcloset()だとRoot方向にしか検索できませんがchild方向にelementを検索する方法はありますか?
2022/01/30(日) 13:01:07.63ID:/oi//KEc0
chiled方向に検索するのがquerySelectorじゃないのですか?
2022/01/30(日) 13:06:33.56ID:hMKxlwO1a
>>427
documentだけじゃなくてelementに対してもquerySelectorメソッドつかえるんですね。ありがとうございます
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。

ニューススポーツなんでも実況