android: inputのvalue書き換え時にスペースが挿入される。

環境

android Sharp 507SH, ローカルファイル

もしかしたらspck editorが関係してるかもしれません
spck editor経由のchromeでも同じ結果でした

PCでは全く問題ないです。

発生している問題

inputのvalueを他の要素の文字列に書き換えた時に、参照した要素の入れ子の深さ分、inputの入力ボックスに半角スペースが前後に挿入される。

例:
(ダブルクォートは開始・終了位置を明確にするために書いてます)

"    sample    "

また、android(spck editorとchromeで確認)のconsoleでid="text"のtextContentを見ると下のようになります

(ダブルクォートはandroidでは本来出力されませんが開始・終了位置を明確にするために書いてます)

"
     sample
     "

該当のソースコード

html
1<!-- 分かりにくい場合はid="text"の入れ子を深くしてください -->
2<div>
3  <div>   
4    <div>
5      <div>
6        <div id="text">sample</div>
7      </div>
8    </div>
9  </div>
10</div>
11<input type="text" id="input">

JavaScript
1const text = document.getElementById("text");
2const input = document.getElementById("input");
3
4text.addEventListener("click", () => {
5  input.value = text.textContent;
6});

試したこと

JavaScript
1input.value = text.textContent.replace(/\s+/g, "");

教えて欲しい事

置換すればいいのですが、根本的な解決になってないですし、
何故androidだけこんなことが起こるのか(改行されることも含めて)理由が知りたいので教えてくれると嬉しいです。

行動規範の内容に同意します

回答2件

親方向にいくらネストを深くしても#textのtextContentは変わりません
androidで試しましたが結果は同じでした

投稿2022/08/05 03:57

yambejp

総合スコア114839

自己解決

spck editorが原因だったようです。
htmlとjsをまとめたファイルを再度chromeで表示したらスペースは表示されませんでした。
(質問文の中で言ったchromeと言うのは全てspck editorから表示したchromeです。またconsoleもspck editor経由のchromeの物です。言葉足らずですいません)

PCと繋げる環境じゃないのでconsoleを確認出来ませんがませんが、恐らく問題無いと思います。

実際に使ったコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>test</title>
8</head>
9<body>
10  <div>
11    <div>
12      <div>
13        <div>
14          <div>
15            <div>
16              <div id="text">sample</div>
17            </div>
18          </div>
19        </div>
20      </div>
21    </div>
22  </div>
23  <input type="text" id="input">
24  <script>
25const text = document.getElementById("text");
26const input = document.getElementById("input");
27
28text.addEventListener("click", () => {
29  console.log(text.textContent.replace(/\s+/g, ""));
30  console.log(text.textContent);
31 // document.write(text.textContent);
32//  input.value = text.textContent.replace(/\s+/g, "");
33  input.value = text.textContent;
34  
35  
36});
37</script>
38</body>
39</html>