web-dev-qa-db-ja.com

<input type = "search"> iOSでキャンセルボタン（x）が表示されなくなりました

<input type="search">

すべてのオンライン記事はそれを示し、inputとtype=searchには、入力の右側にクリアボタンがあります（Apple製品上）。

これはMacOSのSafariでも機能しますが、モバイルSafari（iOS9）では機能しません。

この検索キャンセルボタンを元に戻す方法はありますか？

私はすでにこれを試しました：

input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;}

また、入力にnameとvalueを指定してみました。それをformの中に置くこともできますが、役に立ちません。

私は cssを使用してボタンを追加したページ を見つけましたが、私のiPhoneでは、ボタンを押すとボタンの中にキャレットが配置されます。これは非常に奇妙で使用できません。

htmlioscssformsinput
23
Gerben

だから私が私がどこにいるかを知る方法から始めよう。最初に、OS XおよびiOS 9で入力を_type="search"_としてロードしました。OSXでは機能するがiOSでは機能しないことがおわかりのようです。それで私は調査を始めました。入力にテキストがないアクセシビリティを調べたところ、1つの子要素しかありませんでした。私がテキストを入力したとき、それは突然2つありました。

アクセシビリティの下の隅に表示されます。 div:role(button)の上にカーソルを合わせると、上記のように少し明確なXが強調表示されます。それで、私はiOSで同じことをテストしましたが、実際に同じことを行うのは、同じ要素の上にカーソルを置いたときにのみ、何もハイライトされません。そのため、iOSのサファリによって追加されています。

次に、CSSをいじり始めました。私が最初に思ったのは、表示されないのは単なる表示の問題かもしれないということだったので、これを追加しました。

_::-webkit-search-cancel-button {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: blue;
}
_

これは今私にこれをiOSで与えました：

ですから、それはありますが、iOSでは何らかの理由で非表示になり、コンテンツを取得できません。また、強制的にクリックしても、検索フィールドはクリアされません。私はまだそれをいじり続けていますが、今は彼らがそれを壊したようです。わざとかわからない。当面の間、CSSとJavaScriptのソリューションは、より速くしたい場所に戻る可能性があります。他に何か見つけたら回答を更新します。

[〜＃〜]編集[〜＃〜]

これは私にナッツを運転しています。私はすべての開発者向けドキュメントでサファリとiOSを検索しました。

https://developer.Apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//Apple_ref/doc/uid/（null）-SW1

彼らはまだ上記のリンクでサポートされているものとしてそれを参照していますが、改訂履歴を見て、新しいものが見つからない場合、それらのドキュメントは2012年以降更新されていません。ブラッグ。私はできる限りの組み合わせを試しましたが、うまくいきません。彼らがそれを壊したり、削除したり、言及するのに十分に重要だったと感じていなかったとしても、それを機能させるのはそれほど難しいことではないので、私は推測しても安全だと思います。彼らのドキュメントはこのCSSのようなものを使うように言っています：

_input {
    -webkit-appearance: searchfield;
}

*::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
_

私が言ったようにこの時点であなた自身を転がすか、あるいはバグレポートを提出するかもしれません、そして多分私達は確かに見つけることができます。

Appleに提出されたバグレポート：

  • AtheistP3ace Appleにバグレポートを送信しました。バグ番号24932348。
  • Splaktar 開発者に話しかけたApple=開発者からの回答によると、iOS 9以降、問題が発生しているようです。問題ID 35131989。その後、AtheistP3aceのバグレポートの複製としてマークされました。
18
AtheistP3ace

私はそれを以下のCSSを使用してiPhoneで動作させることができました

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}
<input type="search" value="Example">
9
mayur patki

IOS 9では<input type="search">だけでは実現できないと思います。「ハッキング」を行う必要があります。

これがライブです [〜＃〜] jsfiddle [〜＃〜] の例。

1
Tuc3k