單擊鏈接時顯示一個文本字段

Question

我希望有人單擊鏈接時出現一個文本字段。 我已經對此進行了研究，但似乎沒有任何效果。 這是我到目前為止的內容：

<span id="location_field_index">
  <a href="javascript:void(0)" onclick="innerHTML=\"<input type=\"text\" name=\"update_location\" value=\"<? echo $location_string; ?>\"" >
     <?php echo $location_string; ?>
  </a>
 </span>

我知道到目前為止這可能是錯誤的，但是任何幫助都會很好。

Answer 1

您應該將字段放在表單上，​​然后將其隱藏在div中，直到需要它為止。

<a href="..." onclick="document.getElementById('inputField').style.display = 'block';">Click me</a>

<div id="inputField" style="display:none;">
   <input type="text" id="textInput" value="..." />
</div>

Answer 2

我建議從元素本身中刪除點擊處理程序，然后將其移至外部函數。 以下作品：

var a = document.getElementsByTagName('a');
var t = document.createElement('input');
t.type = 'text';

for (i = 0; i < a.length; i++) {
    a[i].onclick = function() {
        this.parentNode.appendChild(t);
        return false;
    };
}

JS小提琴演示 。

Answer 3

您似乎正在將php與javascript混合使用。 對於純JavaScript解決方案，您需要創建一個要在click上調用的函數，例如， function ClickFunction()然后在其中要使用Document.getElementById('location_field_index')獲取該位置的元素。 然后，您要設置innerhtml屬性。 下面應該做的

    function addBlock() {
        var elem = Document.getElementById('location_field_index');
        elem.innerhtml = "HTML HERE";
        return false;
    }

然后在鏈接內添加<a onclick="addBlock()">Click ME<a>

Answer 4

看看這個小提琴： http : //jsfiddle.net/davecoulter/7vegU/

Answer 5

我返回false以防止鏈接重定向瀏覽器L

<a href="#" onclick="linkClicked(event)">Link</a>
<input type="text" style="display:none;" id="txt" />

....

function linkClicked(event) {
    event.preventDefault();
    document.getElementById('txt').style.display = "block";
    return false;
}

Answer 6

請參閱此頁面上的最后一個示例： http : //api.jquery.com/show/