dポイントプレゼントキャンペーン実施中！

おしえて

パソコンで動くjavascriptがスマホ（iPhoneSE）で動かない

解決済

  • 質問者：junjunjujujun
  • 質問日時：
  • 回答数：7件

インクルードしている問合せフォームの品名が予め入力されるように、
本体のhtmlに、
<head>・・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2 …
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script>
jQuery(function($) {
$.ajaxSetup({
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}
});
$("#form").load("form.html");
});
</script>
<script charset="UTF-8">
function setValue() {
var value = "ほげほげ";
if (value) {
document.form._品名.value = value;
}
}
</script>
・・・・
</head>
<body onload="setValue();">
・・・・
<div id="form"> </div>
を指定して、
<form action="・・・・" name="form">
<input type="text" name="_品名" value="">
のform.htmlをインクルードしています。
パソコンの「検証」でテストすると正常に作動するのですが、スマホだと品名欄が空白になってしまいます。
パソコンとスマホの履歴を削除してみましたが変わりません。
解決方法を教えて下さい。宜しくお願いいたします。

質問者からの補足コメント

  • つらい・・・

    スマホのjavascriptはオンの状態で、ほかのjavascriptは正常に動いています。

      補足日時：2018/02/05 13:50
    通報する

  • つらい・・・

    「_品名」を「target」に変更して
    <script>
    function setValue() {
    document.getElementById('target').setAttribute('value','ほげほげ');
    }
    </script>
    で試しましたが、パソコンやパソコンの「検証」では、target欄に正常に「ほげほげ」が表示されるのですが、スマホ（iPhoneSE）では空白のままです。

    色々検索すると、どうやらiOSのバグのようで、「value="ほげほげ"」を上記のように「setAttribute('value','ほげほげ')」に変化させてみたりしていますがうまくいきません。

    どなたか宜しくお願いいたします。

      補足日時：2018/02/05 18:02
    通報する

  • へこむわー

    やはり、iPhone特有の問題なのでしょうか？

    2000もの商品に各々お問合せメールフォームを設置していて、この度スマホ対応にしたく、このトラブルになりました。

    どうにかなりませんかね？

      補足日時：2018/02/05 22:56
    通報する

  • つらい・・・

    念のため、パソコン上で色々なブラウザでテストしてみました。

    GoogleChrome OK 、Firefox OK 、Opera OK 、Safari OK 、InternetExplorer11 NG 。

    なんと！スマホ(iPhoneSE)のブラウザ Safariもパソコン上ではOKでした。
    その代わり、InternetExplorer11ではNGでした。

    iOSとInternetExplorer11に共通の問題があるのでしょうか・・・・

      補足日時：2018/02/06 17:33
    通報する

  • うーん・・・

    fujillin様のNo.4の【 テスト用HTML 】を試しましたら、GoogleChrome、InternetExplorer11、スマホ(iPhoneSE)　共に下の画像表示となりました。
    次にどうすればいいのかわかりません。
    宜しくお願いいたします。

    「パソコンで動くjavascriptがスマ」の補足画像5
      補足日時：2018/02/07 07:58
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No6です



load部分を書き直さなければならないかと思ったら、ちゃんとcompleteが用意されているので、簡単にそのままでいけますね。
http://api.jquery.com/load/


以下の形式にすれば、想定の動作になると思います。
　・実際に設定する値の内容は、適切に修正願います
　・ひとまず、対象要素のidはtargetのままとしてあります

$(function(){
$.ajaxSetup({
beforeSend:function(xhr){xhr.overrideMimeType("text/html;charset=Shift_JIS");}
});

$("#form").load("form.html", function(){

// ここに追加で行いたい処理を記述する
//（とりあえず、abcdeの文字列を設定する例）
$("#target").val("abcde");

});
});

※ 今回の内容はスマホだから動かず、PCなら動くという種類の内容ではありません。
　 PCでも、以前のままでは動作しない可能性が十分にあります。（通信環境による）
※ 気付くのが遅れまして、大変申し訳ありませんでした。
　（つい、ご質問のタイトルに踊らされてしまいました）
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！
スマホ(iPhoneSE)でもInternetExplorer11でも、動きます！

何とお礼を申したらいいか、本当に感謝です。

これでやっと次の作業に移れます。

ありがとうございました！！

通報する
お礼日時：2018/02/07 14:37

No.6

  • 回答者： fujillin
  • 回答日時：

No5です



うっかり見落としていました（お恥ずかしい）
いろいろとお手間をとらせて、申し訳ありませんでした。

＞スマホ(iPhoneSE)　共に下の画像表示となりました。
記述法の問題ではなく、多分、処理のタイミングの問題でしょうね。
（load前にinput要素に書き込みに行っているだけだと思います）

ajaxのスクリプトの方を書き直す必要がありますが、ちょっと調べないとわからないので、また、後ほど回答します。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： fujillin
  • 回答日時：

No4です。



どうやら、input要素のvalue値にアクセスできないのかな？
No4のサンプルで試してみれば、どこでエラーになるかを確認できるはずなのですが・・・

＞target.innerHTML = "<input type='text' value='hogehoge'>";
inout要素にはinnerHTMLはありませんので、スマホでなくとも確実にエラーになります。

要素をまるごと「入れ替える」処理にしないといけませんね。
（ajaxの際のjQueryの実際の処理は知りませんが、innerHTML や insertAdjacentHTMLで書き換えているものと推測します）
    • good
    • 0
    • 件
通報する
この回答へのお礼

何度もご回答頂き、本当にありがとうございます。

上の補足のように、パソコン上で色々なブラウザでテストしてみました。

GoogleChrome OK 、Firefox OK 、Opera OK 、Safari OK 、InternetExplorer11 NG 。

なんと！スマホ(iPhoneSE)のブラウザ Safariもパソコン上ではOKでした。
その代わり、InternetExplorer11ではNGでした。

iOSとInternetExplorer11に共通の問題があるのでしょうか・・・・

また、<script・・・>は<input・・・>より下に書くべきなのでしょうか？

「No4のサンプルで試して・・・どこでエラーになるかを確認・・・」ということですが、試し方、確認方法がわかりません。（勉強不足で申し訳ありません。）

本当に申し訳ありませんが、どうぞ、宜しくお願いいたします。

通報する
お礼日時：2018/02/06 18:28

No.4

  • 回答者： fujillin
  • 回答日時：

No3です



私には試行してみる環境がないのとスマホもあまり知らないのですが・・・
簡単に調べてみましたが(iPhone)Safariで特に使えないものがあるということもなさそうです。
https://caniuse.com/#search=value

ひとまず、テスト用のHTMLを作ってみました。(下部を参照）
と言っても、ごく簡単なもので getElementById と element.value しか使っていません。
これで、どこで止まるか/止まらないかの状態を見ながら、メソッドをいろいろ変えてみるなどして、試行錯誤ができるのではないかと思います。
（最悪は、step関数がエラーになることもあるのかも知れませんが(笑))

それでもダメな場合は、ajaxはできているようなので、要素ごと入れ替えてしまう方法が考えられます。（あまりスマートではないですけれど）
文字列で値まで設定したHTMLを作成し、innerHTML や insertAdjacentHTMLを用いて挿入して、元の要素は削除してしまうという考え方です、


まったく別のアプローチになりますが、先人たちの知恵を借りるという方法もあるかもしれません。
ご提示のスクリプトでは、ajaxは動作しているようですので、値の変更もjQueryを利用して $('#target').val('abc') あるいは .attr()、.prop()などを用いた処理にすることで可能かもしれません。
（上記同様、入れ替えてしまう方法もあると思います）

※ なんせテスト環境が無いので、残念ながらこれ以上はお役に立てそうもありません。

【 テスト用HTML 】

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Test</title>
<meta charset="shift-jis">
</head>
<body>

<p>
[ STATUS ] =
<span id="info">0:start</span>
</p><p>
<input id="target" />
</p>

<script type="text/javascript">
var step = function(s){
document.getElementById("info").innerHTML = s;
}

step("1:要素取得");
var t = document.getElementById("target");

step("2:値設定");
if(t){
t.value = "abc";
step("3:終了");

} else {
step("1:取得失敗");
}
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

<script>
function setValue() {
document.form.target.value = "hogehoge";
}
</script>

<script>
function setValue() {
document.getElementById('target').setAttribute('value','hogehoge');
}
</script>

<script>
function setValue() {
$('#target').val('hogehoge');
}
</script>

<script>
function setValue() {
$('input[name="target"]').val('hogehoge');
}
</script>

いずれもPCではOKですが、スマホ(iPhoneSE)ではダメでした。

<script>
function setValue() {
var target = document.getElementById('target');
target.innerHTML = "<input type='text' value='hogehoge'>";
}
</script>

の場合は、PCではOKですが、スマホ(iPhoneSE)では入力枠も表示されなくなりました。

せっかく色々と教えていただいたので、もうひと頑張りしようと思います。

本当にありがとうございます。

通報する
お礼日時：2018/02/06 17:10

No.3

  • 回答者： fujillin
  • 回答日時：

No2です。



＞document.getElementById('target').setAttribute('value','ほげほげ');
id=targetにしたのですか？
そうでないなら、getElementById()では要素を取得できませんけれど…
（pcで動いているとのことなので、idにはしてあるみたいですが）

setAttribute()でも動作しないとのことなので、iPhone特有の問題なのかも知れませんね。（すみませんが、スマホはあまりしらないので）
念のため、'ほげほげ'も英字にしてみてもダメなのでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

はい、id=targetにしました。pcでは動いています。
'ほげほげ'を英字＋数字にしてもダメでした。

やはり、iPhone特有の問題なのでしょうか？

2000もの商品に各々お問合せメールフォームを設置していて、この度スマホ対応にしたく、このトラブルになりました。

どうにかなりませんかね？

通報する
お礼日時：2018/02/05 22:55

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



ご質問の様子から、form要素の読み込みはできていると解釈しました。
・・・とするなら、値の設定ができないところに絞り込めるので・・・

＞document.form._品名.value = value;
上記の1行でエラーになっている可能性が大だと推測します。
理由として考えられるのは

1）要素の指定方法が悪い可能性があります。
（スマホの対応対応状況は知りませんが）
name属性あるいは順序で
　forms[0].elements[～～] または　forms[0].elements[0]
あるいは、要素の種類で
　forms[0].getElementsByTagName("input")[0]
のような指定方法にするか、スマホが対応しているのなら
　querySelector(selector)
といった方法で取得するなどに変えれば良いかもしれません。

2）いずれの場合でも、name属性をキーとする指定方法をとる場合は、要素の読み込みがshift-jisで、スクリプトからの指定はutf-8で行っているようなので、齟齬が生じている可能性があります。
該当要素名を、一旦、英数名などに変えて試してみることも必要かも。
（PCでは取得できているとのことなので、こちらは問題ないのかも知れませんが…）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

「_品名」を「target」に変更して
<script>
function setValue() {
document.getElementById('target').setAttribute('value','ほげほげ');
}
</script>
で試しましたが、パソコンやパソコンの「検証」では、target欄に正常に「ほげほげ」が表示されるのですが、スマホ（iPhoneSE）では空白のままです。

色々検索すると、どうやらiOSのバグのようで、「value="ほげほげ"」を上記のように「setAttribute('value','ほげほげ')」に変化させてみたりしていますがうまくいきません。

どなたか宜しくお願いいたします。

通報する
お礼日時：2018/02/05 18:01

No.1

何のスマホか知りませんが


javascriptはオンになっているのですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

表題の通りスマホはiPhoneSEです。
javascriptのオンは確認済みです。

宜しくお願いいたします。

通報する
お礼日時：2018/02/05 13:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報