初めて質問させていただきます、初心者プログラマーです。
web上で使用する、質問用入力フォームを作成しているのですが、
セキュリティの問題上、入力フォーム内にタグが打ち込まれたとき
それを無効化するために、タグ開始と終わりのカッコがそのまま
スルーしないよう、アンパーサンドlt;とアンパーサンドgt;に
置き換える処理を行いたいと思うのですが、どのように記述したら
よいのかがわかりません。この処理はフォームの入力欄全てに対して
有効にしたいのですが、どのように記述したらよいのでしょうか…
どうかご教授お願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<や>を&lt;や&gt;に変えるには、replaceメソッドを使います。


HTMLのサンプルを載せますので、参考にしてみて下さい。
(IE&NN動作確認済み。そのままコピペできます。)

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var names = new Array('t1', 't2', 'ta');

function check()
{
with (document) {
for (var i in names) {
f[names[i]].value = f[names[i]].value.replace(/</g,"&lt;");
f[names[i]].value = f[names[i]].value.replace(/>/g,"&gt;");
}
}
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="f">

<INPUT type="text" name="t1" size="50"><BR>
<INPUT type="text" name="t2" size="50"><BR>
<TEXTAREA name="ta" cols="50" rows="8"></TEXTAREA><BR>
<INPUT type="button" name="b" value="check" onClick="check()"><BR>
</FORM>
</BODY>
</HTML>

解析も勉強のうちですので、頑張って解析してくださいね。
下記のサイトも勉強には欠かせません。

この回答への補足

ご回答ありがとうございます!早速試して、実行できました。
早急に解決しなければならない問題だったので、とても助かりました。
本当にありがとうございます。

ただ、後ひとつだけ質問してもよろしいですか?
今現在、入力フォームのsubmitボタンでonClick時処理としてすでに
以下のallcheck()を呼び出しています。

function allcheck(){
if(check_roman(document.form1.mail1.value)==false){
return false;
}
if(check_roman(document.form1.mail2.value)==false){
return false;
}
if(bytecheck(document.form1.text.value)==false){
return false;
}
}

//allcheck内で呼び出しているスクリプト
function check_roman(strTarget){
var i,transTarget;
var checkStr=new String("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_.1234567890");
transTarget=strTarget.replace(/ /g,"");
for(i=0;i<transTarget.length;i++){
if(checkStr.indexOf(transTarget.charAt(i),0)==-1){
alert("メールアドレスは半角英数字で");
return false;
}
}
return true;
}

//allcheck内で呼び出しているスクリプト
function bytecheck(){
txt = document.form1.text.value;
n = txt.length;
if (n > 2000){
alert("問合せ内容は2000文字以内で");
return false;
}
return true;
}

このallcheckスクリプトの中に、教えていただいたcheckスクリプトの
呼出を加えるとすると、どのように記述したらよいのでしょうか・・・。
何度も申し訳ありませんが、ご教授いただけると幸いです。
どうか、よろしくお願いいたします

補足日時:2001/11/07 16:24
    • good
    • 0
この回答へのお礼

補足内に書いたallcheckの一番下に、check();の一行を記述して、
無事にすべて解決しました。
よく考えずに質問ばかりしてすみませんでした。
今後とも精進し、プログラムを自分の手でバリバリ一から書けるように
がんばります。
ご回答いただき本当にありがとうございました。

お礼日時:2001/11/07 18:03

置き換えに関しては、下記のようにすればできます。



function replaceValue(){
 ver strValue=document.***.***.value;
 ↑ここは、入力された値が入るように変えてください。
 res1=strValue.indexOf("<",0); //文字列中から<を検索
 res2=strValue.indexOf(">",0); //文字列中から>を検索
 if(res1 != -1){ //該当がなければ-1が返るので
  strMsg=strValue.replace("<","&lt;"); //<を<に置き換え
 }
 if(res2 != -1){ //該当がなければ-1が返るので
  strMsg=strValue.replace(">","&gt;"); //<を<に置き換え
 }
}

# サンプル中の"&lt;"と"&gt;"は大文字で書かれていますが、実際は小文字です。

後は、この関数をどう呼ぶかを考えてみてください。
例えば、全部入力が終わった後にボタンを押して、ならそのボタンのonClickに設定すればいいし、入力後であれば、その入力フォームのonBlurまたはonChangeに設定すればOKです。
(ただし、onBlurまたはonChangeに関しては、ブラウザによって動作が異なる可能性があります)
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます!
とても詳しく解説してくださり、本当にありがとうございました。
おかげで、非常に参考になりました。
今後とも精進していこうと思います。

本当にありがとうございました!

お礼日時:2001/11/07 18:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q入力したURLの一部を、あらかじめ設定した単語に置き換えたうえで、そのURLにジャンプできる入力フォームの作り方が分かりません

タイトルのとおり、例えば
http://www.○○○.com/aaa.○○○.○○○
というURLを利用者が入力フォームに入力して、横のボタンをクリックすると
http://www.○○○.com/bbb.○○○.○○○
というようにaaaをbbbに置き換えたURLにジャンプさせるというような入力フォームを作りたいんですが、
作り方が分りません。
恐らくJavaScriptで可能だとは思うんですが、いかんせんプログラミングの知識は皆無なので分りません。
どうか宜しくお願いします。

Aベストアンサー

とりあえず即興で作ってみました。

-------------------------------------------
<html>
<head>
<title>リンクサンプル</title>
<script type="text/javascript">
<!--

function gopage () {
// aaaとbbbは適当に変えてね。

entpath = document.formA.pathstr.value;
gopath = entpath.replace("aaa", "bbb");
location.href = gopath;

}

// -->
</script>
</head>
<body>
<form name="formA">
<input type="text" name="pathstr"><input type="button" name="go" onclick="gopage();" value="Go">

</form>
</body>
</html>
----------------------------------
 とりあえず動作確認はIE6でしかしてませんが、たぶん大体のブラウザで動くかと思います。
 参考になればいいのですが……分からない点は調べて分からなくもないかと思います。努力も必要ですよ。

参考URL:http://www.tohoho-web.com/js/index.htm

とりあえず即興で作ってみました。

-------------------------------------------
<html>
<head>
<title>リンクサンプル</title>
<script type="text/javascript">
<!--

function gopage () {
// aaaとbbbは適当に変えてね。

entpath = document.formA.pathstr.value;
gopath = entpath.replace("aaa", "bbb");
location.href = gopath;

}

// -->
</script>
</head>
<body>
<form name="formA">
<input type="text" name="pathstr"><input type="button" name="go" onclick="gopage()...続きを読む

Qタグを入力して確認するフォームを作成したいのですが・・・

タグを入力してその結果を新しいウィンドウを生成して表示させ、確認することのできるフォームを作成したいのですが・・・

どのようにやればいいでしょうか?

是非、参考になるアドレス・ソースがあれば教えて下さい。

Aベストアンサー

ラフですが、簡単なソースを作ってみました。 こんな感じでしょうか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<title>テスト</title>
<script type="text/javascript">
<!--
function DisWin(){
RW=window.open("","_blank","scrollbars=1, resizable=1");
RW.document.open();
RW.document.write(document.form1.sourse.value);
RW.document.close();
}
//-->
</script>
</head>
<body>
<h1>HTMLテスト</h1>
<form name="form1" action="#">
<textarea cols="80" rows="20" name="sourse">入力欄</ textarea>
<input type="button" value="表示" onClick="DisWin();">
</form>
</body>
</html>

テキストエリアにHTMLを書き込んで「表示」ボタンを押すと、新しいウィンドウを開いて、そこにテキストエリア内に記述された内容を書き出します。
なお、上記ソースではテキストエリア要素の終止タグに、わざと半角スペースを入れて潰してあります。 コピペするときには、この半角スペースを消してください。

見当違いでしたら、ごめんなさい。 参考になれば…

ラフですが、簡単なソースを作ってみました。 こんな感じでしょうか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<title>テスト</title>
<script type="text/javascript">
<!--
function DisWin(){
RW=window.open("","_blank","scrollbars=1, resizable=1");
RW.document.open();
RW.documen...続きを読む

QCGIフォームでのformタグとjavaでのformタグが重複して…

フォーム(CGI)で入力するするときに、カテゴリと言う項目を作って、プルダウンでそれぞれ大カテゴリ・中カテゴリ・小カテゴリと分けてそのカテゴリにあった項目を吐き出したいのですが、
ネットで調べましたら、JavaScriptで表示ができるとの事で、試行錯誤の結果、ちゃんと表示できるようになったのですが、CGIフォーム内でのformタグとjavaでのformタグが重複してプルダウン内のカテゴリが表示しなくなりました…。

私のやりたい方法としては、「教えて!goo」での投稿カテゴリーの様な方法(http://oshiete1.goo.ne.jp/oshiete_new.php3)でできればベストと考えております。

解決方法としてはどの様な方法がありますか?
皆さんお忙しいでしょうけど、ご教授下さい。

Aベストアンサー

こんにちは

例えばsel1の『C』がsel2までしか項目がないとすると対応するsel3プルダウンのリストはmenuI4とmenuV4なので

menuI4 = [ [ ] , [""] ];
menuV4 = [ [ ] , [""] ];

として

プルダウンを作るfunctionで(if(l == "sel2")の部分)

for (i=0; i<menuI[n].length; i++) {
document.form.sel3.options[i] = new Option(menuI[n][i],menuV[n][i]);
if(menuI[n][i] == "") { document.form.sel3.style.visibility = "hidden"; }
}

とすればO.K.でした

Qフォームタグのinputタグ内にカーソルを持っていくと、下記エラーとな

フォームタグのinputタグ内にカーソルを持っていくと、下記エラーとなります。環境は、
prototype.js(1.6)×IE(8)です。FFではエラー表示となりません。
エラーの意味と対処方を教えてください。

メッセージ: オブジェクトがありません。
ライン: 3936
文字: 5
コード: 0
URI: http://ほげほげ/prototype.js

▼該当と思われる行付近
3965行 function getEventID(element) {
3969行 if (element._prototypeEventID) return element._prototypeEventID[0];
3970行 arguments.callee.id = arguments.callee.id || 1;
3971行 return element._prototypeEventID = [++arguments.callee.id];
3972行 }

Aベストアンサー

#2, 4 です。

(※以下、全てのコードの全角空白は半角空白に置換してください。)

---------
/* Prototype JavaScript framework, version 1.6.1
* (c) 2005-2009 Sam Stephenson
*
* Prototype is freely distributable under the terms of an MIT-style license.
* For details, see the Prototype web site: http://www.prototypejs.org/
*
*--------------------------------------------------------------------------*/

...

// 4516行目
 function observe(element, eventName, handler) {
  element = $(element);

  var responder = _createResponder(element, eventName, handler);

  if (!responder) return element;

  if (eventName.include(':')) {
   if (element.addEventListener)
    element.addEventListener("dataavailable", responder, false);
   else {
    element.attachEvent("ondataavailable", responder);
    element.attachEvent("onfilterchange", responder);
   }
  } else {
   var actualEventName = _getDOMEventName(eventName);

   if (element.addEventListener)
    element.addEventListener(actualEventName, responder, false);
   else
    element.attachEvent("on" + actualEventName, responder);
  }

  return element;
 }
---------

window だけ別処理にしているわけではなさそうです。
エラーが発生しない流れは、以下のようになると思います。

------
function loadListener (event) {
 var element = document.getElementById('undefined');
 var firstChild = element.firstChild; // エラー: オブジェクトがありません。
}
window.attachEvent('onload', loadListener); // 実行され、エラーが発生する
window.attachEvent('ononload', loadListener); // 実行されないので、エラーも発生しない
------

#2, 4 です。

(※以下、全てのコードの全角空白は半角空白に置換してください。)

---------
/* Prototype JavaScript framework, version 1.6.1
* (c) 2005-2009 Sam Stephenson
*
* Prototype is freely distributable under the terms of an MIT-style license.
* For details, see the Prototype web site: http://www.prototypejs.org/
*
*--------------------------------------------------------------------------*/

...

// 4516行目
 function observe(element, eventName, handler) {
...続きを読む

Qフォームで入力した値を別のフォームにコピーする

はじめまして!

javascriptでフォームAに入力した内容を
ボタンが押されたら同一ページのフォームBに
ペーストされるscriptを作りたいのですが
そういったスクリプトを公開しているものがあれば
教えていただきたいです。よろしくお願いいたします。

やりたい事:

[フォームA]---------------------
 お名前:テキスト
 性別:ラジオボタン
 趣味:セレクトボックス
 コメント:テキストエリア

 [コピーボタン]←内容をコピーするボタン
--------------------------------

↓コピーボタンが押されたら↓

[フォームB]---------------------
 お名前:テキスト
 性別:ラジオボタン
 趣味:セレクトボックス
 コメント:テキストエリア
--------------------------------
Aフォームに入力した内容Bフォームに反映される

よろしくお願いいたします。

Aベストアンサー

<html>
<body>
<form id="a">
<input type="text" value="osiete goo"><br>
<input type="radio" value="m" name="sex">男
<input type="radio" value="w" name="sex" checked>女<br>
<select>
<option value="0">子供の遊び</option>
<option value="1" selected>大人の遊び</option>
</select><br>
<textarea>あぁ~</textarea>
<input type="button" value="copy" onclick="copyFormValue(this.form,'b')">
</form>
<form id="b">
<input type="text" value=""><br>
<input type="radio" value="m" name="sex">男
<input type="radio" value="w" name="sex">女<br>
<select>
<option value="0">子供の遊び</option>
<option value="1">大人の遊び</option>
</select><br>
<textarea></textarea>
</form>
<script>
function copyFormValue(moto,sore){
var om=moto.elements;
var os=document.getElementById(sore).elements;
for(var i=0,m=om.length;i<m;i++){
var f=om[i].type;
if(f!='button') if(f!=os[i].type) { alert('ちがう');return;}
switch(f){
case 'text': case 'textarea': case 'hidden': os[i].value=om[i].value;break;
case 'checkbox': case 'radio': os[i].checked=om[i].checked; break;
case 'select-one': os[i].options[om[i].selectedIndex].selected=true;
}
}
}

</script>
</body>
</html>
selectのマルチには未対応
フォームはまったく同じ順序であること

<html>
<body>
<form id="a">
<input type="text" value="osiete goo"><br>
<input type="radio" value="m" name="sex">男
<input type="radio" value="w" name="sex" checked>女<br>
<select>
<option value="0">子供の遊び</option>
<option value="1" selected>大人の遊び</option>
</select><br>
<textarea>あぁ~</textarea>
<input type="button" value="copy" onclick="copyFormValue(this.form,'b')">
</form>
<form id="b">
<input type="text" value=""><br>
<input type="radio" value=...続きを読む


人気Q&Aランキング

おすすめ情報