iOS環境でのクリップボードコピーのバグ対応

Rails（フロントエンドerb）で作ったサービスでiOSだけバグっていた機能があり修正箇所少ない割にハマって数時間溶かしてしまった。

こんな感じの機能

ボタンをクリック →javascriptでtextareaのvalueを取得 →ajaxでAPIにリクエスト送る。レスポンスを受け取ったら取得したtextareaの内容を変換 →変換した内容をクリップボードにコピー

こんな感じで%{name}みたいに変数埋め込んでいい感じに変換してクリップボードに貼れる的なやつ

%{name}様

予約が完了しました。

iOSのクリップボード

ググったらiOS10以降だと色々制限があるみたいだったので一つ一つ条件見直してみた。。が、この辺りは全部問題なさそう。

参考 テキストをクリップボードにコピーする | cly7796.net

iOSでも対応する場合の補足として、iOSでコピーしたい場合は以下のような条件があるようです。

• inputとtextareaからのみコピーが可能
• form内にない場合はcontenteditable属性がtrueである必要がある
• readonly属性がtrueの場合はコピーできない
• コピーするテキストが選択されている状態である

解決策

ajaxの非同期設定をfalseにしたら直った。なんだそれ。。

$.ajaxSetup({async : false}); // これを追加
$.ajax({
  type: "post",
  url: "/api/hoge",
  data: {
     name: name
  },
}).done(function(data){
  navigator.clipboard.writeText(value);
})