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

这依赖于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 回答
0

请注意，在其当前形式中，您只能更改一次视频 URL，因为在第二个按钮单击时，innerHTML 将不再包含 INSERT-VIDEO-URL-HERE，而是包含第一个按钮单击的 URL。这可能需要也可能不需要。

假设这不是意外行为，那么您只需要在将其n替换为表单字段中的 url 后将其更改为。见下文

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>

更喜欢将 onsubmit 放在表单上，​​因为如果用户按下回车键而不点击按钮，他会绕过验证。我完成了您在 html 中替换 url 的代码，并在函数末尾添加 return false 以防止提交表单，否则它会重新加载页面。

于 2012-12-06T19:18:39.953 回答