Question

我有一个始终在变化的链接，我希望它根据链接指向的位置将一些文本打印到输入文本字段中。例如，我的链接可能如下所示。

<a onclick="main()" id="link" href="#foo">

或有时相同的链接可能看起来像

<a id="link" href="#bar">

如果链接链接到#foo，那么我希望以下内容看起来像

<input id="input" type="text" value="Hello World" />

如果链接链接到#bar，那么我需要输入值为Good Bye World。

怎样才能解决这个问题。我尝试了以下但我认为它不起作用，因为URL在用户点击之前不会改变。所以它正在寻找尚未存在的东西。

function main() {
  var url = window.location.href;
  if (url.search("#foo") > 0) {
    document.getElementById("link").value = "#foo";
    document.getElementById("input").value = "Hello World";
  }
}

UPDATE 以下是一个链接可能的一些哈希标记的列表。单击链接时输入文本字段会显示什么。

#work = Can't talk I'm at work
#home = I have kids I still can't talk
#bar = I'm busy getting drunk I can't talk
#bathroom = Listen you perv I'm not interested don't you get it.

但请记住，该网站最初位于example.com，其链接可以包含链接到的任何上述哈希标记。当用户点击一个链接时，取决于链接href具有的哈希标记，确定将在输入字段中输入的内容。

Answer 1

这应该可以，但你不能用jsfiddle测试它。希望这有助于您理解。

JS：

document.getElementById('link').onclick = function () {
    var url = window.location.href;
    if (url.indexOf("#foo") > -1) {
        document.getElementById("link").innerHTML = "#foo";
        document.getElementById("input").value = "Hello World";
    }
}

HTML：

<a id="link" href="#foo">link</a>
<input id="input">

Answer 2

您是否尝试检查当前网址的哈希部分，如果是location.hash，如果您尝试检查所点击链接的实际属性，则应该使用{{1而不是？

getAttribute

你当然必须关闭这些锚点并拥有有效的标记！

修改

你可以摆脱内联onclick，然后做：

function main() { var hash = window.location.hash, inp = document.getElementById("input"); if (hash == '#foo') { inp.value = "Hello World"; }else if (hash == '#bar') { inp.value = "Goodbye World"; }else{ inp.value = "Stick a fork in me"; } }

Answer 3

将文本输入的id设置为“hello”并执行以下操作

function main(){
    if(url.indexOf("foo") != -1){
        document.getElementById("hello").value = "Hello World foo";   
    }else{
        document.getElementById("hello").value = "Hello World bar";  
    }
}

 <input type="text" id="hello" value="Hello World" />

根据链接的内容更改输入字段值

3 个答案: