0

我有一个系统，当按下按钮时，会在屏幕左侧创建一个文本框并用 div 包围。每个新文本框都被命名为 textbox1,2 等。我想要做的是当用户单击它周围的 div 时，文本框会替换屏幕右侧的按钮，并且用户可以输入新生成的文本框它也应填充屏幕左侧的文本框。我想这样做的原因是因为左侧的文本框不可编辑，除非用户单击 div 并编辑右侧的框。我似乎无法弄清楚该怎么做。

请原谅缺少标签等的任何错误，因为这是一个经过严格编辑的版本。此外，在查看下面的代码之前，您可能需要查看我设置的演示。http://jsfiddle.net/JHmaV/335/。

这是HTML代码

    <html>
<body>
    <table width ="100%" alight="right">
        <td width ="51.5%"></td>
        <td> <div id="addField" class="tabOptions">Add field</div></td>
    </table>

    <table align ="left"style="background-color: white" width="100%">


    </tr>
    <td width ="50%">
        <ul id ="firstColumn">
            <div id="identifier">
            </div>
        </ul>
    </td>
    <td>
        <ul id ="secondColumn" width="5%">
            <div id="placeholder">
                <div id="mainPanel">
                    <li><input type="button" class="formCreationButton" id="textAdd" value="Single line text" /></li>

                </div>
            </div>
        </ul>
    </td>
    <tr>
</table>

这是jQuery

      var counter = 0;
var textBoxCounter = 1;
var tempStorage = $('div#placeholder').html();



function setValue(target) {

    $("textBox1").replaceWith("<h2><input type='text' onkeydown='setValue(this)' value='"+ target.value +"' id='" + target.id +"' name='" + target.id +"')'></h2>");

    target.value = target.value;
}
function changeHeader(target) {

    if(target.id == "formNameChange"){
        $('h2').replaceWith('<h2>' +target.value + '</h2>');
    }
    else{
        $('h4').replaceWith('<h4>' +target.value + '</h4>');
    }
}

$(document).ready(function() {

     $("#addField").live('click','div',function(){            
        $('div#placeholder').html(tempStorage);
    });

    $('#textBox1').live('keyup',function() {

        alert("TESTING");
    });
    $('#textBox1').live('keypress',function ()
    {
        $('textBox1').val('Changed Value');
        alert('test');
    });
    $('#textBox1').live('onFocus',function ()
    {

        alert('test');
    });
    $(".container").live('click','div',function(){

        var divID = this.id;
        if(divID != ""){
            var lastChar = divID.substr(divID.length - 1);
            var content = document.getElementById(divID).outerHTML;
            var text = document.getElementById(divID).innerHTML;
            var textboxId = $('div.container')
            .find('input[type="text"]')[lastChar]
            .id;
            $('div#placeholder').html(content);
                                alert(textboxId);
        }
        else{

        }
    });

    $('#textAdd').live('click',function() {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container " + counter + "' class='container'><li><input type='text' onkeydown='setValue(this)'  id='textBox " + textBoxCounter +"' name='textBox " + textBoxCounter +"')'></li></div></br>";
        document.getElementById("identifier").appendChild(newdiv);
        textBoxCounter++
        counter++;
    });
});​

请注意，我使用的是 jQuery 1.4.4。我对此进行了多次尝试，但无法正确完成。任何帮助将不胜感激，在此先感谢您。保罗。

4

1 回答 1

1

你发的帖子有很多问题。我不明白您在解决这一切方面做得不够好，但我发现这可能至少会导致您的一些（如果不是全部）问题：

  1. 元素 ID 中不能有空格。那不是有效的 HTML。
  2. 您最终会得到两个具有相同 id 的输入（一个在左侧，然后一个在您单击左侧文本框时显示在右侧）。这将导致您通过 $('#myId').live 设置的任何事件也绑定到这个新创建的文本框。
  3. 如果您的元素具有相同的 id（如上所述）。这不是有效的 HTML。

编辑：

这是一个 jsFiddle，它可以满足您的需求（我认为！哈哈）。我稍微修改了您的代码以使其正常工作，但它应该是不言自明的。当您聚焦一个文本框时，我会创建一个新文本框，设置一些链接回原始文本框的数据属性，然后为文本框设置一个实时事件侦听器。当按键发生时，我会找出与您正在输入的文本框相关的文本框并更新它的值。

说得通？

应该注意的是，这不是最干净的解决方案，因为代码有点乱（可以清理）。但是，这应该让您开始走上一条可行的道路。我将把重构留给你:)

http://jsfiddle.net/JHmaV/338/

于 2012-07-16T16:17:23.163 回答