HTML/CSSでハイライトするブラウザのフォーム充填と入力をオーバーライドする
https://stackoverflow.com/questions/2338102
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は2つの基本的なフォームを持っています - 両方とも同じページでサインインしてサインアップします。今、私はサインインフォームの自動充填に問題がありません、 しかし、サインアップフォームのオートが充填されているので、私はそれが好きではありません。
また、フォームスタイルは黄色の背景を取得します。黄色の色になるのをやめるために私は何ができますか および（おそらく）自動充填？前もって感謝します！
解決
あなたの可能性は、あなたが所定の解除する予定の解決策の種類 - コード/コードベース（例えば、Web部品経由）、または中央（例えばJavaScript ECMAなど）に依存します。 。これらのオファーのそれぞれは代替案は基本的に異なります。 1.コードベース - 最も明白な - カスタムWebパーツは、会議ワークスペースのテンプレートIDに基づいて列挙します（SharePoint 2010がすべてのテンプレートを格納する実際のWebTemp * .xmlの下にあります。 0、MPS＃1など）
<Template Name="MPS" ID="2">
<Configuration ID="0" Title="Basic Meeting Workspace" Hidden="FALSE" ImageUrl="/_layouts/images/stmw.png" Description="A site to plan, organize, and capture the results of a meeting. It provides lists for managing the agenda, meeting attendees, and documents." DisplayCategory="Meetings" SupportsMultilingualUI="FALSE" > </Configuration>
<Configuration ID="1" Title="Blank Meeting Workspace" Hidden="FALSE" ImageUrl="/_layouts/images/stbm.png" Description="A blank meeting site for you to customize based on your requirements." DisplayCategory="Meetings" SupportsMultilingualUI="FALSE" > </Configuration>
<Configuration ID="2" Title="Decision Meeting Workspace" Hidden="FALSE" ImageUrl="/_layouts/images/stdm.png" Description="A site for meetings that track status or make decisions. It provides lists for creating tasks, storing documents, and recording decisions." DisplayCategory="Meetings" SupportsMultilingualUI="FALSE" > </Configuration>
<Configuration ID="3" Title="Social Meeting Workspace" Hidden="FALSE" ImageUrl="/_layouts/images/stsm.png" Description="A site to plan social occasions. It provides lists for tracking attendees, providing directions, and storing pictures of the event." DisplayCategory="Meetings" SupportsMultilingualUI="FALSE" > </Configuration>
<Configuration ID="4" Title="Multipage Meeting Workspace" Hidden="FALSE" ImageUrl="/_layouts/images/stmm.png" Description="A site to plan, organize, and capture the results of a meeting. It provides lists for managing the agenda and meeting attendees in addition to two blank pages for you to customize based on your requirements." DisplayCategory="Meetings" SupportsMultilingualUI="FALSE" > </Configuration>
</Template>
2番目のオプションは、ここで説明されているように専用SOAP Webサービスを使用しています。="nofollow"> http://msdn.microsoft.com/en-us/library/ff764949（v= Office.12）.aspx - 特に前方への進行方法ではありません。
クライアント側オブジェクトモデルを使用した3番目の代替案は、JavaScriptを介して1stオプションと同じ概念に従います。 SPWebのすべてのプロパティへのアクセス http： //www.stefan-walter.net/show-edit-web-properties-javascript-client-side-Object-model/
他のヒント
影の中の「強い」でそれをだましてください：
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
-webkit-text-fill-color: #333;
}
このCSSルールを追加すると、黄色の背景色が消えます。 :)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
<form autocomplete="off">
ほとんどすべての最新のブラウザがそれを尊重します。
あなたがしていることについて考える：そのカスタムアクションを消費するページをロードすると同時に、リストカスタムアクションを非同期的に削除して再プロビジョニングしています。予測不可能なことが起こると期待します。これを多くの同時ユーザーで作成環境に入れて、それぞれがリスト上のカスタムアクションを削除して再プロビジョニングし、「ホットな混乱」を持っています。
あなたがしようとしていることを達成するのははるかに簡単な方法があります、そしてそれははるかに機能的になるでしょう。
それでリストがあります、そして私は「アクティブ」または「非アクティブ」の値を持つステータスフィールドがあると仮定します。アクティブアイテムで特定の関数を呼び出します（それをactiveFunc（）と呼びましょう）非アクティブ項目（actinactionfunc（））上の別の関数（intackfunc（））。
SharePointには、呼び出されたときにECBにアイテムを動的に挿入することができるJavaScript 'Hook'があります。 Jan Tielensは優れた
Custom_AddListMenuItems（Doc libの場合はDoc Libの場合）を呼び出して、どのビューをオンにしているかを確認し、正しいECBエントリを追加します（ここでは、ビューのwindow.locationを介してURLをチェックしています）。名前）：
function Custom_AddListMenuItems(m, ctx) {
if (ctx.ListTitle == 'Tenders' && window.location.href.indexOf('ActiveTenders') > 0) {
CAMOpt(m, "Call Active Func", "javascript:ActiveFunc();", "");
}
if (ctx.ListTitle == 'Tenders' && window.location.href.indexOf('InactiveTenders') > 0) {
CAMOpt(m, "Call Inactive Func", "javascript:InactiveFunc();", "");
}
}
正確な構文は小さなarcaneですが、Janの投稿は何が起こっているのかのナッツとボルトを説明しています。だから今、私たちは私たちがどのビューにあるかをチェックし、正しいECBエントリを追加しています。
待機 - 私たちはそれより良いことができます。
これらのエントリをECBに動的に追加するためにJavaScriptを書いているので、それをさらにステップで取り、ビューのURLではなくステータスフィールド自体をチェックするだけです。これを行うことは、どのようなステータスの組み合わせに含まれていても、まだ作成されていないビューでさえ存在していて、どのようなビューでも適切な機能を持つことができます。
これを行うために簡単なクエリを書くためにステータスを確認し、あなたのコードを適切に調整します。
function Custom_AddListMenuItems(m, ctx) {
if (ctx.ListTitle == 'Tenders' ) {
$.ajax({
async: false,
url: L_Menu_BaseUrl + "/_vti_bin/listdata.svc/Tenders(" + currentItemID + ")?$select=StatusValue",
dataType: "json",
success: function(data) {
switch(data.d.StatusValue)
{
case "Active":
CAMOpt(m, "Call Active Func", "javascript:ActiveFunc();", "");
break;
case "Inactive":
CAMOpt(m, "Call Inactive Func", "javascript:InactiveFunc();", "");
break;
default:
//some other status, do nothing
break;
}
},
error: function(data) {
//error, do something
}
});
}
}
ここで明確にするためのポイント数：
- 私はjQueryを使って現在のアイテムのステータスを照会するためにRESTインターフェースを呼び出します。そうでないため、関数が返される機会がある前に、関数が既定のECBを返してビルドするため、ASYNC= FALSEを設定することが重要です。
- RESTインターフェースは選択列を少し面白く扱います。私のステータス列の値は、Webサービスの結果の
Custom_AddDocLibMenuItemsと呼ばれました。ブラウザのListData.SVCをチェックして、値を確認してください。 - currentItemID変数は、ECBコードで利用可能なSharePoint変数です。 Jan Tielensは彼のブログについてこれについてより詳細に入っています。
最後のポイント - 決して、システム管理者からJavaScriptアドバイスを取ります！ ：）
また、ブラウザがそれを追跡しないように、フォーム要素の名前属性を生成されるものに変更することもできます。ただし、firefox 2.x+とGoogle Chromeは、リクエストURLが同一である場合、それについて多くの問題を抱えていないようです。基本的に、サインアップフォームに塩リクエストパラメーションとソルトフィールド名を追加してみてください。
しかし、autocomplete = "off"はまだ一番の解決策だと思います:)
HTML5の時点で自動完了を無効にすることができます（via autocomplete="off"）、しかし、ブラウザのハイライトをオーバーライドすることはできません。あなたはいじくり回すことができます ::selection CSSでは（ほとんどのブラウザにはベンダーのプレフィックスが必要です）、それはおそらくあなたも助けません。
ブラウザベンダーがベンダー固有のそれをオーバーライドする方法を具体的に実装していない限り、ユーザーのサイトのスタイルシートを既にオーバーライドすることを目的としているスタイルについては何もできません。これらは通常、スタイルシートが適用されて無視された後に適用されます ! important オーバーライドも。
ブラウザでオートコンプリートしている場合は、コードを持っているだけでも自動補完的です <form> エレメント。
私はそれを入れてみました <input> 要素も同様にうまく機能しました。
<form autocomplete="off"> AND <input autocomplete="off">
ただし、この属性のサポートは停止しています、読んでくださいhttps://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
私が見つけたもう1つの作品は、入力フィールドの内部にプレースホルダーを連れて行くことです。これは、電子メール、ユーザー名、または電話フィールドであることを示唆しています（つまり、「あなたの電子メール」、「電子メール」など」）
これにより、ブラウザがどのようなフィールドであるかがわからないため、オートコンプリートを試みません。
これにより、SafariとChromeの両方で問題が修正されます
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}
これらのゾーンとそのラベルは、ただのラベルです。 5つの間の機能差はありません。ただし、これらのラベルは、それらがどのように使用されているのか、およびそれらが何のためのものであるかを示しています。異なる認証方法を使用するには、複数のゾーンが必要ない場合があります。実際には、Microsoft "デフォルトゾーン"に複数の認証方法を実装することをお勧めします。 1つのURLだけが使用されているため、ユーザーがユーザーが簡単にする。
内部URL、ゾーンとパブリックURLの間の接続を理解するための
リンクしたスクリーンショットは、WebKitがセレクターを使用していると言っています input:-webkit-autofill それらの要素のために。これをCSSに入れてみましたか？
input:-webkit-autofill {
background-color: white !important;
}
それがうまくいかなければ、おそらく何もしません。これらのフィールドは、ユーザーが個人情報（ユーザーの自宅住所など）で自動化されていることをユーザーに警告するために強調されており、セキュリティリスクを可能にするページを非表示にすることができます。
form 要素には autocomplete あなたが設定できる属性 off. 。 CSSの時点で !important プロパティの後の指令により、それがオーバーライデンにならないようにします。
background-color: white !important;
IE6だけがそれを理解していません。
私があなたを誤解した場合、それもあります outline 役に立つ可能性のあるプロパティ。
RadEditorとSharePoint HTMLエディタのCSSクラスと属性は、編集可能なDIVに対して異なります。私は、このDIVからSharePointクラスと属性を削除することによって、あなたはRadEditorとversaを守ることができますと思います。 DIVからSharePointエディタを削除するためにこのjQueryプラグインを試してください：
(function ($) {
$.fn.SPNonEditable = function () {
return this.each(function () {
$(this).removeClass("ms-rtestate-write ms-rteflags-0 ms-rtestate-field").removeAttr("role aria-haspopup style contentEditable UseInlineStyle aria-multiline");
});
};
})(jQuery);
その後、このコードを含めることができます。
$("[contentEditable]").SPNonEditable();
その結果、リボンのボタンはまだありますが、無効になります。そしてSharePoint Editorは編集可能なDIVを認識しません。
更新：
コードでJSファイル "wikijs.js"を作成できます。
.
//if it's a wiki page:
if ($("#_wikiPageMode").length > 0)
{
$("[contentEditable]").removeClass("ms-rtestate-write ms-rteflags-0 ms-rtestate-field").removeAttr("role aria-haspopup style UseInlineStyle aria-multiline");
}
その後、このファイルを「スタイルライブラリ」に入れます。
その後、マスターページでは、ScriptLink Controlを含める必要があります。
.
<SharePoint:ScriptLink id="ScriptLinkWiki" runat="server" Name="~SiteCollection/Style Library/wikiJS.js" Localizable="False" OnDemand="False" />
すべてのWikiページでSharePointエディタを無効にするため、このソリューションが非常に好きではありません。だからこそ、JavaScriptを変更したいページについてもっと具体的に変更することをお勧めします。
ラジデターを取り除く
また、SharePoint Editorを無効にする代わりにRadeDitorを非表示にすることができます。
.var wikiMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiMode == "Edit")
{
if ($("#_wikiPageMode").length > 0)
{
$(".RadEditor").hide();
}
}
多くのことを試した後、私は自動化されたフィールドをnukし、それらを複製したものに置き換える作業ソリューションを見つけました。添付のイベントを緩めないように、私は別の（少し長い）ソリューションを思いつきました。
各「入力」イベントで、関係するすべての入力に「変更」イベントを迅速に添付します。自動充填されているかどうかをテストします。はいの場合、ブラウザをだましてユーザーによって値が変更されたと考える新しいテキストイベントを発送し、黄色の背景を削除できます。
var initialFocusedElement = null
, $inputs = $('input[type="text"]');
var removeAutofillStyle = function() {
if($(this).is(':-webkit-autofill')) {
var val = this.value;
// Remove change event, we won't need it until next "input" event.
$(this).off('change');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '*');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn't
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on('input', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on('change', onChange);
}
});
すべてのブラウザ用のシンプルなJavaScriptソリューション：
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
クローン入力、リセット属性、および元の入力を非表示にします。 iPadにはタイムアウトが必要です
ブラウザはパスワードタイプフィールドを検索するため、別の回避策は、フォームの先頭に隠されたフィールドを含めることです。
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
サーバ上のSQLサービスの再起動（WFES＆DB）このエラーを解決しました。
AutoComplete Offは、最新のブラウザによってサポートされていません。私が見つけたオートコンプリートを解く最も簡単な方法は、HTMLとJSの小さなトラックでした。最初にすることは、HTMLの入力のタイプを「パスワード」から「テキスト」に変更することです。
<input class="input input-xxl input-watery" type="text" name="password"/>
ウィンドウがロードされた後、オートコンプリートが起動します。それで大丈夫です。しかし、フィールドのタイプが「パスワード」ではない場合、ブラウザはどのフィールドを完了する必要があるかを知りませんでした。したがって、フォームフィールドにオートコンプリートはありません。
その後、Exの場合、Bind Event FocusinはパスワードフィールドにFocosinをフォーキンします。バックボーンで：
'focusin input[name=password]': 'onInputPasswordFocusIn',
の onInputPasswordFocusIn, 、単純なチェックによって、フィールドのタイプをパスワードに変更するだけです。
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
それです！
UPD：これは、無効なJavaSciprtで動作しません
2018年のアップデート。また、面白いトリックも見つけました。入力フィールドにreadonly属性を設定し、フォーカスイベントで削除します。最初にブラウザがフィールドを自動化するのを防ぎ、2番目にデータを入力できます。
これをCSSに入れてみませんか：
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
それはあなたの問題の世話をするはずです。ただし、ユーザーは、フォームが慣れている方法でフォームが自動化されていることがわかりません。
編集]これを投稿した後、同様の答えがすでに与えられていることがわかりました と あなたはそれがうまくいかなかったとコメントしたこと。テストしたときに動作したのはなぜかわかりません。
ここでの本当の問題は、WebKit（Safari、Chrome、...）にバグがあることです。ページに複数の[フォーム]がある場合、それぞれが[入力型= "text" name = "foo" ...]（つまり、属性 'name'と同じ値を持つ）を持つ場合、ユーザーが返されるときページに、[ページ上の最初の[フォーム]の入力フィールドで、送信された[フォーム]ではなく、オートフィルが実行されます。 2回目は、次の[フォーム]が自動充填されます。同じ名前の入力テキストフィールドを持つ[フォーム]のみが影響を受けます。
これは、WebKit開発者に報告する必要があります。
Operaは右[フォーム]を自動化します。
FirefoxとIEは自動化しません。
だから、私はもう一度言います：これはWebKitのバグです。
