Question

我是JavaScript的新手，我需要帮助解决一个简单的问题：

我有一个空输入字段和两个链接（anchors），其中title属性的值不同。

我想编写一小段JavaScript，将input元素的值更改为用户点击的链接的标题。

例如：

第一个链接= Prague
第二个链接= Budapest

当我点击“布达佩斯”时，我希望将input元素的值更改为“布达佩斯”

如果需要，我可以提供基本的jsFiddle，但希望我已经让自己清楚了。

Answer 1

该过程将找到所有锚点，然后附加一个单击处理程序，该处理程序将输入值设置为单击的锚点title属性。下面的示例查找页面上的所有锚点，但您可能更喜欢添加一个类并使用document.querySelectorAll()（旧IE不完全支持）。

<强> Demo

HTML

<input type="text" id="myinput" value="" />
<a href="#" title="Prague">Prague link</a>
<a href="#" title="Budapest">Budapest link</a>

JavaScript的：

window.onload = function(){
    var anchors = document.getElementsByTagName('a');
    for(var i=0; i<anchors.length; i++){
        anchors[i].onclick = function(){
            document.getElementById("myinput").value = this.getAttribute("title");
            return false;
        }
    }
};

Answer 2

如果项目真的很小，那么可能更容易将一些onclick处理程序附加到锚点，然后定义一个非常基本的函数来更新输入元素。

<强> HTML

<a href="#" title="Prague" onclick="updateValue(this.title, event);">Prague</a>
<a href="#" title="Budapest" onclick="updateValue(this.title, event);">Budapest</a>
<input type="text" id="country" name="country" value="" />

<强>的JavaScript

function updateValue(val, event) {
    document.getElementById("country").value = val;
    event.preventDefault();
}

示例：http://jsfiddle.net/zUVA5/

如果你有大量的锚点，那么手动添加单独的onclick处理程序会非常痛苦，为避免这种情况，你可以简单地将你的内容包装在一个包含的元素中，然后应用click事件以编程方式处理所有嵌套锚点的处理程序：

示例：http://jsfiddle.net/FUvYC/

Answer 3

试试这个：

HTML

<a href="javascript:void(0);" id="Budapest" onclick="changeTitle('Budapest')">Budapest</a>
<a href="javascript:void(0);" id="Prague" onclick="changeTitle('Prague ')">Prague       
</a>

<input type="text" id="test"/>

的Javascript

<script>
function changeTitle(changeVal){
  var link_text = $('#'+changeVal).text();
  $("#test").val(link_text);   
}
</script>

javascript按链接标题更改输入值

3 个答案: