jQueryオートフォームスクリプトEasy Form Autocomplete

Webフォームに記入するのにうんざりしていませんか？ Cookieをクリアする必要があるため、Webフォームの山をテストし、デフォルト値を失い続けますか？さて、私はあなたのために御馳走を持っていますか！ jquery autoformというこのjqueryスクリプトを書きましたが、それが何をするかは簡単です。 。あらゆるフォーム、サインアップフォーム、登録フォーム、連絡先フォーム、基本的にブラウザベースのフォームで動作します。繰り返しのフォームテストに適しています。ほとんどのフォームには「名前」、「フルネーム」、「フルネーム」などの名前が異なるため、これを処理でき、あらゆる種類のフォームフィールドに完全にカスタマイズ可能です。

キーテイクアウト

• jQueryオートフォームスクリプトは、自動充填Webフォームの高速でカスタマイズ可能なソリューションを提供し、さまざまなフォームフィールドをサポートし、日付フィールドを現在の日付に自動的に更新します。
スクリプトはWebプロジェクトに簡単に統合され、ユーザーがクリックして任意のページで自動充填フォームをクリックできるようにすることができます。
• その汎用性にもかかわらず、jQuery AutoformはiframesまたはPopup Windowsに埋め込まれたフォームをサポートせず、「名前」属性を持つフィールドでのみ動作します。
• jQueryオートフォーム機能

速い - 1秒未満のフォームを埋めます

stable - 任意のブラウザで動作します
アクセス可能 - 簡単に使用できるブラウザのブックマークの形をとることができます
カスタマイズ可能 - 任意の名前/任意の値で入力を追加できます。
スマート - 日付は期限切れにならず、日付を現在の日付まで自動的に入力します。
jQueryオートフォームデモ
これは、いくつかの標準フィールドを含むフォームです

date
name
アドレス



電子メール
電話
メッセージ

ニュースレター


jquery autoform
を実行します

独自のオートフォームを作成します

1. jquery4u.util.autoform.js
をダウンロードします
2. 名前、電子メール、その他のフォームフィールドをカスタマイズします
3. 特定のフォームに一致するように入力フィールド名を編集します
4. obfuscate（オプションがいいがいい）
5. 'javascript：’を適切なコードにprependし、新しいブックマークを作成します
フォームにアクセスして、ブックマーク
6. をクリックするだけです

jQueryオートフォームフルスクリプト

<span>(function($) {
</span> 
<span>;var JQUERY4U = {};
</span> 
<span>;JQUERY4U.UTIL =
</span><span>{
</span> 
    <span>name: 'JQUERY4U.UTIL',
</span> 
    <span>autoForm: function ()
</span>    <span>{
</span>        <span>/* field values fill forms */
</span>        <span>var formValues  = [];
</span>        formValues<span>['firstname'] = 'jQuery';
</span>        formValues<span>['middlename'] = '4u';
</span>        formValues<span>['lastname'] = 'Blog';
</span>        formValues<span>['mobile'] = '0416425699';
</span>        formValues<span>['email'] = 'email@domain.com';
</span>        formValues<span>['house'] = '123';
</span>        formValues<span>['street'] = 'Bank Street';
</span>        formValues<span>['city'] = 'Sunnybank';  
</span>        formValues<span>['country'] = 'Australia';
</span>        formValues<span>['postcode'] = '4109';
</span>        formValues<span>['message'] = 'This is the demo example of jQuery AutoForm.';
</span>        formValues<span>['emailnewsletter'] = true;
</span>     
        <span>/* field name mappings */
</span>        formValues<span>['newsletter'] = formValues['emailnewsletter'];
</span>        formValues<span>['housenumber'] = formValues['house'];
</span>        formValues<span>['name'] = formValues['firstname'] + ' ' + formValues['middlename'] + ' ' + formValues['lastname'];
</span>        formValues<span>['fullname'] = formValues['name'];
</span>        formValues<span>['phone'] = formValues['mobile'];
</span>        formValues<span>['suburb'] = formValues['city'];
</span>        formValues<span>['address1'] = formValues['housenumber'] + ' ' + formValues['street'];
</span>        formValues<span>['address2'] = formValues['suburb'];
</span>        formValues<span>['address3'] = formValues['country'] + ' ' + formValues['postcode'];
</span>        <span>/* enter more field mappings here */
</span>
        <span>/* date functions */
</span>        <span>function twodigits(digits) {
</span>            <span>return (digits > 9) ? digits : '0' + digits;
</span>        <span>}
</span>        <span>var fullDate = new Date();
</span>        <span>var twoDigitDays = twodigits(fullDate.getDate());
</span>        <span>var twoDigitMonth = twodigits(fullDate.getMonth() + 1);
</span>        <span>var date = twoDigitDays + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
</span>        fullDate<span>.setDate(fullDate.getDate()+7);
</span>        formValues<span>['date'] = date;  
</span>     
        <span>/*serialize every input field on page */
</span>        <span>var fields = $("input, select, textarea").serializeArray();
</span>     
        <span>/* init - special input type fixes */
</span>        <span>$('input[type=checkbox], input[type=radio]').attr('checked', true);
</span>     
        jQuery<span>.each(fields, function(i<span>, field</span>){
</span>            <span>/* check if field has a value in array */
</span>            <span>if (formValues[field.name] !== 'undefined') {
</span>                <span>$('input[name='+field.name+']').val(formValues[field.name]); /* generic inputs */
</span>                <span>$('textarea[name='+field.name+']').val(formValues[field.name]); /* textarea */
</span>                <span>$('select[name='+field.name+']').attr('selectedIndex', 1); /* select */
</span>                <span>$('input[name='+field.name+']').attr('checked', formValues[field.name]); /* checkbox/radio */
</span>            <span>}
</span>        <span>});
</span>    <span>}
</span><span>};
</span><span>JQUERY4U.UTIL.autoForm();
</span> 
<span>})(jQuery);</span>

jQueryオートフォームスクリプト（ブックマーク難読化縮小バージョン）

自動住宅地の名前のカスタマイズが完了したら、最終スクリプトは以下のコードのようなものに見えるはずです。これをブックマークに変換するために、シンプルなプレップエンド「JavaScript：」。

var _0xdd45=["x55x54x49x4C","x4Ax51x55x45x52x59x34x55x2Ex55x54x49x4C","x66x69x72x73x74x6Ex61x6Dx65","x6Ax51x75x65x72x79","x6Dx69x64x64x6Cx65x6Ex61x6Dx65","x34x75","x6Cx61x73x74x6Ex61x6Dx65","x42x6Cx6Fx67","x6Dx6Fx62x69x6Cx65","x30x34x31x36x34x32x35x36x39x39","x65x6Dx61x69x6C","x65x6Dx61x69x6Cx40x64x6Fx6Dx61x69x6Ex2Ex63x6Fx6D","x68x6Fx75x73x65","x31x32x33","x73x74x72x65x65x74","x42x61x6Ex6Bx20x53x74x72x65x65x74","x63x69x74x79","x53x75x6Ex6Ex79x62x61x6Ex6B","x63x6Fx75x6Ex74x72x79","x41x75x73x74x72x61x6Cx69x61","x70x6Fx73x74x63x6Fx64x65","x34x31x30x39","x6Dx65x73x73x61x67x65","x54x68x69x73x20x69x73x20x74x68x65x20x64x65x6Dx6Fx20x65x78x61x6Dx70x6Cx65x20x6Fx66x20x6Ax51x75x65x72x79x20x41x75x74x6Fx46x6Fx72x6Dx2E","x65x6Dx61x69x6Cx6Ex65x77x73x6Cx65x74x74x65x72","x6Ex65x77x73x6Cx65x74x74x65x72","x68x6Fx75x73x65x6Ex75x6Dx62x65x72","x6Ex61x6Dx65","x20","x66x75x6Cx6Cx6Ex61x6Dx65","x70x68x6Fx6Ex65","x73x75x62x75x72x62","x61x64x64x72x65x73x73x31","x61x64x64x72x65x73x73x32","x61x64x64x72x65x73x73x33","x30","x67x65x74x44x61x74x65","x67x65x74x4Dx6Fx6Ex74x68","x2F","x67x65x74x46x75x6Cx6Cx59x65x61x72","x73x65x74x44x61x74x65","x64x61x74x65","x73x65x72x69x61x6Cx69x7Ax65x41x72x72x61x79","x69x6Ex70x75x74x2Cx20x73x65x6Cx65x63x74x2Cx20x74x65x78x74x61x72x65x61","x63x68x65x63x6Bx65x64","x61x74x74x72","x69x6Ex70x75x74x5Bx74x79x70x65x3Dx63x68x65x63x6Bx62x6Fx78x5Dx2Cx20x69x6Ex70x75x74x5Bx74x79x70x65x3Dx72x61x64x69x6Fx5D","x75x6Ex64x65x66x69x6Ex65x64","x76x61x6C","x69x6Ex70x75x74x5Bx6Ex61x6Dx65x3D","x5D","x74x65x78x74x61x72x65x61x5Bx6Ex61x6Dx65x3D","x73x65x6Cx65x63x74x65x64x49x6Ex64x65x78","x73x65x6Cx65x63x74x5Bx6Ex61x6Dx65x3D","x65x61x63x68","x61x75x74x6Fx46x6Fx72x6D"];(function (_0x65dfx1){;;var _0x65dfx2={};;;_0x65dfx2[_0xdd45[0]]={name:_0xdd45[1],autoForm:function (){var _0x65dfx3=[];_0x65dfx3[_0xdd45[2]]=_0xdd45[3];_0x65dfx3[_0xdd45[4]]=_0xdd45[5];_0x65dfx3[_0xdd45[6]]=_0xdd45[7];_0x65dfx3[_0xdd45[8]]=_0xdd45[9];_0x65dfx3[_0xdd45[10]]=_0xdd45[11];_0x65dfx3[_0xdd45[12]]=_0xdd45[13];_0x65dfx3[_0xdd45[14]]=_0xdd45[15];_0x65dfx3[_0xdd45[16]]=_0xdd45[17];_0x65dfx3[_0xdd45[18]]=_0xdd45[19];_0x65dfx3[_0xdd45[20]]=_0xdd45[21];_0x65dfx3[_0xdd45[22]]=_0xdd45[23];_0x65dfx3[_0xdd45[24]]=true;_0x65dfx3[_0xdd45[25]]=_0x65dfx3[_0xdd45[24]];_0x65dfx3[_0xdd45[26]]=_0x65dfx3[_0xdd45[12]];_0x65dfx3[_0xdd45[27]]=_0x65dfx3[_0xdd45[2]]+_0xdd45[28]+_0x65dfx3[_0xdd45[4]]+_0xdd45[28]+_0x65dfx3[_0xdd45[6]];_0x65dfx3[_0xdd45[29]]=_0x65dfx3[_0xdd45[27]];_0x65dfx3[_0xdd45[30]]=_0x65dfx3[_0xdd45[8]];_0x65dfx3[_0xdd45[31]]=_0x65dfx3[_0xdd45[16]];_0x65dfx3[_0xdd45[32]]=_0x65dfx3[_0xdd45[26]]+_0xdd45[28]+_0x65dfx3[_0xdd45[14]];_0x65dfx3[_0xdd45[33]]=_0x65dfx3[_0xdd45[31]];_0x65dfx3[_0xdd45[34]]=_0x65dfx3[_0xdd45[18]]+_0xdd45[28]+_0x65dfx3[_0xdd45[20]];function _0x65dfx4(_0x65dfx5){return (_0x65dfx5>9)?_0x65dfx5:_0xdd45[35]+_0x65dfx5;} ;var _0x65dfx6= new Date();var _0x65dfx7=_0x65dfx4(_0x65dfx6[_0xdd45[36]]());var _0x65dfx8=_0x65dfx4(_0x65dfx6[_0xdd45[37]]()+1);var _0x65dfx9=_0x65dfx7+_0xdd45[38]+_0x65dfx8+_0xdd45[38]+_0x65dfx6[_0xdd45[39]]();_0x65dfx6[_0xdd45[40]](_0x65dfx6[_0xdd45[36]]()+7);_0x65dfx3[_0xdd45[41]]=_0x65dfx9;var _0x65dfxa=_0x65dfx1(_0xdd45[43])[_0xdd45[42]]();_0x65dfx1(_0xdd45[46])[_0xdd45[45]](_0xdd45[44],true);jQuery[_0xdd45[54]](_0x65dfxa,function (_0x65dfxb,_0x65dfxc){if(_0x65dfx3[_0x65dfxc[_0xdd45[27]]]!==_0xdd45[47]){_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[51]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[48]](_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);_0x65dfx1(_0xdd45[53]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[52],1);_0x65dfx1(_0xdd45[49]+_0x65dfxc[_0xdd45[27]]+_0xdd45[50])[_0xdd45[45]](_0xdd45[44],_0x65dfx3[_0x65dfxc[_0xdd45[27]]]);} ;} );} };_0x65dfx2[_0xdd45[0]][_0xdd45[55]]();} )(jQuery);
[/cc]

さらなる注意

iframe埋め込みフォームやポップアップウィンドウでは動作しません。
は、「名前」属性のみをフィールドに記入します。
日付は期限切れになりません - 自動日付を現在の日付に自動的に入力します。

jquery autoform

に関するよくある質問

HTMLコードにjQueryオートフォームの実装は簡単なプロセスです。まず、jqueryライブラリをHTMLファイルに含める必要があります。これを行うには、HTMLファイルのヘッドセクションに次のスクリプトタグを追加することで： 。その後、.autoform（）メソッドを使用して、フォームを自動的に埋めることができます。使用方法の例は次のとおりです。

$（ "＃myform"）。オートフォーム（{

> data：{
> name： "john doe"、
email： "john.doe@example.com"
}
}）;

他のJavaScriptライブラリでjQueryオートフォームを使用できますか？

はい、jQueryオートフォームは他のJavaScriptライブラリと一緒に使用できます。ただし、ライブラリ間に競合がないことを確認する必要があります。 jQueryは、 `=シンボルを使用する他のライブラリとの競合を回避するために使用できる$ .noconflict（）メソッドを提供します。使用方法は次のとおりです。 }）;
}）;
この例では、$ .noconflict（）が呼び出され、= variableを他のライブラリに戻すことができます。次に、jQueryの$（document）.ready（） `メソッドは、ページドキュメントオブジェクトモデル（DOM）がJavaScriptコードが実行されるように準備ができている場合にのみ実行されることを確認するために使用されます。このメソッドは、サーバーへのリクエストが失敗したときに呼び出されます。使用方法の例は次のとおりです。
$（ "＃myform"）。オートフォーム（{
> data：{
> name： "john doe"、
email： "john.doe@example.com"
}
}）。 textStatus）;
}）;
この例では、リクエストが失敗した場合、エラーメッセージでアラートボックスが表示されます。一般的なクラスまたは属性を使用してフォームを選択し、それらに.autoform（）メソッドを呼び出すだけです。例は次のとおりです：

$（ "。myforms"）。オートフォーム（{

> data：{

> name： "john doe"、

email： "john.doe@example.com"
}）;
この例では、クラスのすべての形式は、
jQueryオートフォームは、動作をカスタマイズするために使用できるいくつかのオプションを提供します。たとえば、OnSuccessオプションを使用して、フォームが正常に記入されたときに呼び出される関数を指定できます。例は次のとおりです：
$（ "＃myform"）。autoform（{
> data：{
> name： "john doe"、
email： "john.doe@example.com"
}、

onsuccess：function（）{ ajaxでjqueryオートフォームを使用できますか？

はい、ajaxでjqueryオートフォームを使用できます。 $ .ajax（）メソッドを使用して、サーバーにリクエストを送信し、.done（）メソッドを使用して、リクエストが成功したときにフォームに入力できます。例は次の例を次に示します：
$。ajax（{ url： "mydata.json"
}）。done（function（data）{
> $（ "＃myform"）。autoform（{
>> data：data：data
}）;
）;
動的データでjQueryオートフォームを使用するにはどうすればよいですか？

​​

データオプションに関数を渡すことで、jqueryオートフォームを動的データで使用できます。この関数は、フォームの記入に使用されるデータを返す必要があります。例は次のとおりです：

$（ "＃myform"）。autoform（{

> data：function（）{
return { name：$（ "＃nameinput"）。val（）、
email：$（ "＃emailinput"）。 #NameInputと#EmailInput入力フィールド。データオブジェクトで選択するオプションの値を指定するだけです。例は次のとおりです。
$（ "＃myform"）。オートフォーム（{
> country： "usa"
}
}）;
;データオブジェクトのブール値を指定して、チェックボックスと無線要素を埋めるオートフォーム。値が真の場合、チェックボックスまたはラジオボタンがチェックされます。それが誤っている場合、それはチェックされません。例は次のとおりです。
$（ "＃myform"）。オートフォーム（{> data：{

> arew：true

}

}）;

この例では、



jquery autoformを使用してjquery autformを使用できますか？要素。データオブジェクトに挿入するテキストを指定するだけです。例は次のとおりです。
$（ "＃myform"）。autoform（{>>> message： "hello、world！"
}}

}）;

この例では、メッセージTextareaはテキスト「Hello、World！」で満たされます。

以上がjQueryオートフォームスクリプトEasy Form Autocompleteの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。