0

サイトのフォームにテキストボックスと送信ボタンがあるようにしようとしています。ユーザーがテキスト ボックスに動画の URL を入力して [送信] をクリックすると、JavaScript は特定のテキスト ブロックをその URL に置き換える必要があります。

これが私のコードです。私はJavaScriptが初めてで、事前に助けてくれてありがとう!:

<!doctype html>
<html>
<head>
<meta type="utf-8">
<title> Vid_hack </title>
</head>
<style type="text/css">
a:link { color: #CC0000 ; text-decoration: bold}
a:active { color: #CC0000 ; text-decoration: none}
a:visited { color: #CC0000; text-decoration: none}
a:hover { color: #FFFFFF; text-decoration: bold; background: #336699}

body {

background-color: #222222;

}
</style>
<body>
<div align="center">
<p center="" style="background: #444444; border-radius: 15px; border: solid 3.0pt white; padding: 10px">


<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>

<BR>
<BR>
<form method="post">
<input type="text" name="vid" value="Insert URL here" maxlength="200" />
<br>
<button onclick="return vid()">Play</button>
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<script>
function vid()
{
var txt = $("#vid").attr("value");
$("#url embed").attr("src",txt);
return false;
}
</script>
<BR>
<BR>
<BR>
<span style="color: #FFF" align="center">
<BR>
<BR>
Please view the included README file for more information.
</span>
</p>
</div>
<BR>
<BR>
<BR>
</body>
</html>
4

3 に答える 3

0

現在のフォームでは、2番目のボタンクリックでinnerHTMLにINSERT-VIDEO-URL-HEREが含まれなくなり、代わりに最初のボタンクリックからのURLが含まれるため、ビデオURLを変更できるのは1回だけであることに注意してください。それは望ましい場合と望ましくない場合があります。

これが予期しない動作ではないと仮定するとn、フォームフィールドのURLに置き換えた後、innerHTMLを変更する必要があります。下記参照

function vid()
{
    var str=document.getElementById("url").innerHTML; 
    var n=str.replace("INSERT-VIDEO-URL-HERE", document.forms[0].elements[0].value);
    document.getElementById("url").innerHTML = n;
}

これは、周囲のHTMLを知らなくても、いくつかの仮定を行う簡単な解決策であることに注意してください。コード全体を改善できることがいくつかあります。

  1. document.writeは避けてください。少なくとも、フラッシュをラッパーに追加して、次のようなことを行いますdocument.getElementsById('#flash_wrapper').innerHTML = flash_wrapper;
  2. インラインJavaScriptイベント（onclick属性の使用など）は避けてください。http://www.quirksmode.org/js/events_advanced.html

将来、ページのコンテンツと相互作用するjavascriptをさらに作成する予定がある場合は、http：//jquery.comでjQueryを学習することをお勧めします。これは、全体像から多くの頭痛の種を取り除き、学ぶのが非常に簡単だからです。

于 2012-12-06T19:23:16.263 に答える
0

私はあなたがそれをしたいと思います：

<script>
var flash_wrapper = 
'<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>'

document.write(flash_wrapper)
</script>

</script>
<BR>
<BR>
<form method="post" name="myForm" onsubmit="return valid()">
<input type="text" name="first_name" value="Insert URL here" maxlength="100" />
<br>
<button>Play</button>
</form>

<script>
function valid(){
    var url = document.myForm.first_name.value;
    var str = document.getElementById("url").innerHTML; 
    var n = str.replace("INSERT-VIDEO-URL-HERE", url);
    document.getElementById("url").innerHTML = n;
    return false;
}
</script>

ユーザーがEnterキーを押してボタンをクリックしないと、検証をバイパスするため、フォームのonsubmitの場所を優先します。そして、html の URL を置換するためのコードを完成させ、フォームの送信を防ぐために関数の最後に return false を追加します。それ以外の場合は、ページをリロードします。

于 2012-12-06T19:18:39.953 に答える
0

これはjqueryに依存しています

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<script>
var flash_wrapper = 
'<object><param name="allowfullscreen" value="true"></param><p id="url"><embed  src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>'

document.write(flash_wrapper)
</script>
<BR>
<BR>
<form method="post">
<input type="text" id="first_name" value="Insert URL here" maxlength="100" />
<br>
<button onclick="return vid()">Play</button>
</form>

<script>
function vid()
{ 
    var txt = $("#first_name").attr("value");
    $("#url embed").attr("src",txt);
    return false; 
}
</script>​

試してみてください http://jsfiddle.net/axrwkr/jDhNc/

于 2012-12-06T19:32:11.000 に答える