例如,我知道可以在Javascript中执行某些操作,允许用户根据用户文本输入更新文本:
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
查看上面的代码:tizag.com/javascriptT/javascript-innerHTML.php
但是,我想知道是否可以为url链接执行类似操作,而不是上面的代码。下面我逐步介绍了用户输入文本时我想要发生的事情:
文本字段中的用户输入: ESPN
用户点击按钮在文本字段中提交文字
感谢您的帮助......顺便说一句......如果您不能说我有点新手,那么细节是值得赞赏的。
答案 0 :(得分:10)
这是普通JS中的一个,在您键入时更新:
<a id="reflectedlink" href="http://www.google.com/search">http://www.google.com/search</a>
<input id="searchterm"/>
<script type="text/javascript">
var link= document.getElementById('reflectedlink');
var input= document.getElementById('searchterm');
input.onchange=input.onkeyup= function() {
link.search= '?q='+encodeURIComponent(input.value);
link.firstChild.data= link.href;
};
</script>
注意:
没有内联事件处理程序属性(最好避免使用它们);
分配键盘和更改,尝试在键盘更新发生时进行更新并确保最终捕获所有其他更新;
encodeURIComponent()
的使用,如果搜索词包含任何非ASCII或URL特殊字符,则必须使用;
设置Location(link)对象的search
属性,以避免再次写出整个URL;
在链接中设置Text节点的data
以反映之后的完整URL。 不要设置innerHTML
来自用户输入,因为它可能包含&
和<
等HTML特殊字符。
答案 1 :(得分:4)
#1:你需要一些表格
#2:表格提交时你需要抓住
#3:根据表单的提交更改网址
以下是演示:http://jsfiddle.net/maniator/K3D2v/show/
这是代码:http://jsfiddle.net/maniator/K3D2v/embedded/
HTML:
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
JS:
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
theForm.onsubmit = function(e){
location = "http://jsfiddle.net/maniator/K3D2v/show/#"
+ encodeURIComponent(theInput.value);
return false;
}
答案 2 :(得分:1)
我建议使用jQuery之类的跨浏览器库而不是直接的JavaScript。使用jQuery,您可以为按钮添加一个单击处理程序,获取输入值,构建URL,并设置window.location以转到新URL
HTML
<input type="text" id="q" />
<input type="button" id="submit" value="submit" />
的JavaScript
$(function () {
$('#submit').click(function() {
var url = "http://www.google.com/search?q=";
url += $('#q').val();
window.location = url;
});
});
答案 3 :(得分:1)
你可以试试这个;
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://www.google.com?q=" + userInput;
lnk.innerHTML = lnk.href;
}
</script>
Here is a link : <a href="" id=lnk>nothing here yet</a> <br>
<input type='text' id='userInput' value='Enter Search String Here' />
<input type='button' onclick='changeText2()' value='Change Link'/>
答案 4 :(得分:1)
这是我设备在几秒钟内的解决方案:
<input type="text" name="prog_site" id="prog_site" value="http://www.edit-me.com" />
<a href="#" onclick="this.href=document.getElementById('prog_site').value" target="_blank">Open URL</a>
没有复杂的javascript,没有额外的引号也不需要函数。只需根据您的需要编辑ID标签,它就能完美运行。
答案 5 :(得分:0)
我认为这可能有用:
.btn {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.btn:hover {
background-color: #555;
color: white;
}
.textinput {
line-height: 2.5em;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
</head>
<body>
<form action='#' method='post'>
<label for='ytid'>Please enter your YouTube Video ID:</label>
<br>
<br>
<iframe
href='#'
width='287.5'
height='250'
frameborder='0'
allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
allowfullscreen
src='https://www.youtube.com/embed/'
id='ytvid'
></iframe>
<br>
<br>
<input
type='text'
class='textinput'
size='50'
id='ytid'
name='ytid'
placeholder='m4jmapVMaQA'
minlength='1'
maxlength='11'
onchange='document.getElementById("ytvid").src = "https://www.youtube.com/embed/" + this.value'
>
<br>
<br>
<button type='submit' class='btn'>Generate Subtitles »</button>
</form>
</body>
</html>
警告: 此代码段在Stack Overflow中可能无法正常运行。
这样,每当文本输入发生变化时,视频就会更新。
我实际上是在制作YouTube视频字幕发生器,所以我只复制了粘贴的代码。
答案 6 :(得分:0)
<a href="www.google.com/search?q=" id="link">www.google.com/search?q=</a><br>
<input type="text" id="userInput" value="Enter your text here"><br>
<input type="button" onclick="changeText2()" value="change text">
<script>
function changeText2()
{
var input=document.getElementById('userInput').value;//gets the value entered by user
//changing the href of tag <a> by concatenatinng string "www.google.com/search?q=" and input (user input)
document.getElementById("link").href = "www.google.com/search?q="+input;
//changing the text from "www.google.com/search?q=" to "www.google.com/search?q=" + user input
document.getElementById("link").innerHTML = "www.google.com/search?q="+input;
}
单击按钮将调用函数changeText2。哪个执行任务。