通过单击按钮使用javascript添加文本框

debugcn 发表于 Dev

用户名

是否可以将文本框添加到同一域的iframe中。因此，我创建了一个供用户单击的按钮。

<button id="text" onclick="addTextBox()">Text</button>

当用户单击按钮时，我需要在iframe中添加一个文本框。

<iframe id="iframeDiv" class="section"></iframe>

我已经试过了

JS：

function addTextBox() {

    var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"></textarea></div>';

    var iframe = document.getElementById('iframeDiv'),
        iframe.innerHTML += parent.text;

    $('div').draggable({
        cancel: "textbox",
        start: function () {
            $('#textbox').focus();
        },
        stop: function () {
            $('#textbox').focus();
        }
    });

}

window.onload = function () {
    addTextBox();

    return;
}

我也做了一个小提琴：JSFiddle

我还想了解如何将文本标签附加到DOM结构中

维诺斯

您可以使用document.createElement来创建元素，也可以使用jQuery来创建元素。并使用iframe.contentWindow.document.body.appendChild具有多个元素

     function addTextBox() {    
        var text = document.createElement('textarea'),
        iframe = document.getElementById('iframeDiv');
        text.setAttribute('id', 'textbox');

        iframe.contentWindow.document.body.appendChild(text);    
     }

或者，您也可以执行以下操作：

    function addTextBox() {    
        var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"> </textarea></div>',
        iframe = document.getElementById('iframeDiv');
        iframe.contentWindow.document.body.innerHTML = text;    
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。