f003
テキストフィールドでオートコンプリート機能を用いる
Copyright(C) 2004 web工房 All Rights Reserved
action
テキストフィールドに入力したURLにリンクします。
テキストフィールドにURL(http://www.〜)を記入し[リンク]をクリックして下さい。
[オートコンプリート]
◆オートコンプリートに記憶◆
※テキストフィールドにURLを入力して｢Enter｣を選択して下さい。
※URLを入力して｢リンク｣ボタンをクリックしても記憶されません。
◆記憶したオートコンプリートデータの消去◆
※表示されたオートコンプリートから消去するデータにフォーカスして
[delete(削除)]キーを選択して下さい。
web技
※テキストフィールドは<form>〜</form>に記述します。
※オートコンプリートを使用するには<input〜>に
(1)vcard_name="vCard.Email"
vcard_name
vCard.Email:メールアドレス
(注)URLを入力するテキストフィールドですが vCard.Email で機能します
(その他にも沢山の設定がありますが、ここでは省略します)
(2)autocomplete="on"
を記述します。
※「リンク」ボタン及び「リセット」ボタンを追加します。
※下記は、onmouseover/onmouseoutのイベントハンドラやalt/title属性等は省略しています。
-----次の行から(copy)-----
<form name="FORM">
<input type="text" name="URL_Path" value="http://" size="90%"
style="cursor:default;ime-mode:inactive"
vcard_name="vCard.Email" autocomplete="on"><br>
<input type="button" value="リンク" onclick="UrlView()">
<input type="reset" value="リセット" >
-----上の行まで(copy)-----
※テキストフィールドには次の2つのstyle属性を設定しています。
(1)style="cursor:default;"：カーソルを変更する技
(2)style="ime-mode:inactive"：入力を半角英数字モードに替える
[技m016]カーソルの形を変える、を参照して下さい。
※上記の例ではテキストフィールドに入力された文字の最後尾にカーソルが移動するスクリプトが動いています。
この技は
[技b001]テキストフィールドを用いる
を参照して下さい。なお、このスクリプト名は C_Set() で、
<body nload="C_Set()"
<input type="reset" value="リセット" onclick="C_Set()">
と、2ケ所でイベント起動するようにされています。
◆手順2【スクリプト】入力のチェックとアクション実行
※入力をチェックしデータが入力されていなければ警告(alert)します
※URLをオープンします(window.open)
-----次の行から(copy)-----
function UrlView(){
var URL=FORM.URL_Path.value;
if ((URL=="http://")||(URL=="")) {
alert("URL(http://〜)が記入されていません");
return false;
}
window.open(URL,"window_f003","
width=800,height=600,top=0,left=100,scrollbars=1,resizable=1,
toolbar=1,menubar=0,location=0,directories=0,status=0"); }
-----上の行まで(copy)-----
※警告を発する技(alert)は
[技t003]確認ウィンドウ(confirm)/警告ウィンドウ(alert)を表示する
を参照して下さい。
※新たにウィンドウを開く技(window.open)は
[技k002]大きさや形式を指定して新しくウィンドウをオープンする
を参照して下さい。
解説等
◆クッキーを使わないIE限定技です。
◆よく｢テスキトボックスにURLを入力して下さい｣などとケースがありますが、これがめんどうでしょうがない、と思いませんか。そんなとき効力を発揮。
◆IEのオプション設定で｢オートコンプリートを実行する設定｣になっていないと、本機能は使えません。もし作動しない場合は確認して下さい。
※オートコンプリート機能を有効にするには(IE6.0の場合)
メニューバーから[ツール>インターネットオプション>コンテンツ]の順に選択し、個人情報の｢オートコンプリート｣ボタンを選択します。ダイアログボックスの｢オートコンプリートの使用目的｣の各項目にチェックをいれて下さい。
keyword
◇vcard_name◇autocomplete
history
(2004.10.04)IE6.0の｢オートコンプリート｣の設定について解説を追加しました。
(2004.09.30)設置
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----