Javascript 在Divs中更改动态生成的textbox的内容
我有一个系统,当按下按钮时,会在屏幕左侧创建一个文本框,并将其包围在一个div中。每个新文本框都被命名为textbox1、2等。我想做的是,当用户单击它周围的div时,文本框会替换屏幕右侧的按钮,用户可以输入新生成的文本框文本框,也应填充屏幕左侧的文本框。我之所以这样做是因为左侧的文本框不可编辑,除非用户单击div并编辑右侧的文本框。我似乎不知道怎么做 请原谅在缺少标签等方面的任何错误,因为这是一个经过严格编辑的版本。在看下面的代码之前,你可能想看看我设置的演示 下面是HTML代码Javascript 在Divs中更改动态生成的textbox的内容,javascript,jquery,html,Javascript,Jquery,Html,我有一个系统,当按下按钮时,会在屏幕左侧创建一个文本框,并将其包围在一个div中。每个新文本框都被命名为textbox1、2等。我想做的是,当用户单击它周围的div时,文本框会替换屏幕右侧的按钮,用户可以输入新生成的文本框文本框,也应填充屏幕左侧的文本框。我之所以这样做是因为左侧的文本框不可编辑,除非用户单击div并编辑右侧的文本框。我似乎不知道怎么做 请原谅在缺少标签等方面的任何错误,因为这是一个经过严格编辑的版本。在看下面的代码之前,你可能想看看我设置的演示 下面是HTML代码 &l
<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++;
});
});
var计数器=0;
var textBoxCounter=1;
var tempStorage=$('div#placeholder').html();
函数设置值(目标){
$(“textBox1”)。替换为(“”;
document.getElementById(“标识符”).appendChild(newdiv);
文本框计数器++
计数器++;
});
});
请注意,我使用的是jQuery 1.4.4。我已经尝试过几次了,但都做不好。我们将非常感谢您的帮助,提前谢谢您。
保罗。你发布的内容有很多问题。我不明白你做得好到足以解决所有问题,但以下是我发现的可能导致你至少部分(如果不是全部)问题的原因:
这些空格更多的是由于跨页面复制而产生的错误。是的,这就是我用同样的名字想要的。我希望用户将文本输入到新创建的框中,该框应复制到旧文本框中。我是否应该创建一个新的文本框,并尝试以这种方式跨内容复制?我能看到的唯一问题是,在编辑右侧的框时,跟踪左侧的框,以便同时更改内容。对不起,如果我没有有效地理解我需要的东西。谢谢你的回复@Chaney用一个解决方案更新了我的帖子:)太好了!非常感谢好先生,这正是我需要的!谢谢