Javascript动态添加文本框，并再次将文本框转换为文本_Javascript_Jquery

Javascript动态添加文本框，并再次将文本框转换为文本

javascript jquery

Javascript动态添加文本框，并再次将文本框转换为文本,javascript,jquery,Javascript,Jquery,我需要一些东西，比如给孩子们的填空表。当人们点击------（破折号）时，它应该变成一个文本框，人们可以输入它。之后，当他们在键入后从该元素移动时，该元素应变成他们在该文本框中输入的文本我真的不知道如何处理这个问题。我尝试了以下代码，但发生的情况是，我无法在文本框内键入。光标根本没有出现 <html> <head> <title>NSP Automation</title> <script src =

我需要一些东西，比如给孩子们的填空表。当人们点击------（破折号）时，它应该变成一个文本框，人们可以输入它。之后，当他们在键入后从该元素移动时，该元素应变成他们在该文本框中输入的文本

我真的不知道如何处理这个问题。我尝试了以下代码，但发生的情况是，我无法在文本框内键入。光标根本没有出现

<html>
    <head>
        <title>NSP Automation</title>
        <script src ="jquery.min.js">
        </script>
    </head>
    <body>

        <div class="container">
            My Name is = <span id="name">__________<span>
        </div>
        <script>
            $(document).on('click', '#name', function(){
                document.getElementById("name").innerHTML = "<input type=\"text\">";
            });
        </script>
    </body>
</html>


NSP自动化
我的名字是__________
$（文档）。在（'单击'，'名称'，函数（）上）{
document.getElementById（“名称”）.innerHTML=“”；
});

有没有关于如何实现这一点的建议

谢谢，

我建议您使用输入框，不要进行任何转换

只需使用CSS删除边框并在底部添加虚线边框

input[type=text]{
    border:none;
    border-bottom:1px dashed #777;
} <!-- something like that -->

这样，您就不需要替换html元素，只需将它们设置为不同的样式

，因为您已经在整个文档上设置了侦听器，每次单击都将重新创建输入标记。尝试以下方法：

$('#name').on('click', function(){
  this.innerHTML = "<input type=\"text\">";
  $('#name').off('click')
}

$（'#name'）。在（'click'，function（）上{
this.innerHTML=“”；
$（'#name'）。关闭（'单击'）
}

单击span元素后，再次删除该元素上的侦听器，您应该能够键入

为什么不使用文本输入，只更改CSS类

CSS:

JavaScript:

$('#nameInput').focus(function(){
    $(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
    $(this).removeClass('focused').addClass('blurred');
});

HTML:


我的名字是

检查此JSFIDLE：

$（文档）。在（'click'，'#name'，函数（e）上{
如果（$（“#myText”）.is（e.target））
返回；
$（this.html（“”）；
});
$（document）.on（“blur”、“#name”，function（））{
$（this.html（$（“#myText”）.val（））；
});

以下是一个为容器中的所有跨度生成所需行为的示例。一些细节可以改进，但我认为它按预期工作

function convertSpanToInput() {
    // Insert input after span
    $('<input id="tmp_input">').insertAfter($(this));
    $(this).hide(); // Hide span
    $(this).next().focus();
    $("#tmp_input").blur(function() {
        // Set input value as span content
        // when focus of input is lost.
        // Also delete the input.
        var value = $(this).val();
        $(this).prev().show();
        $(this).prev().html(value);
        $(this).remove();        
    });
}

$(function() {
    // Init all spans with a placeholder.
    $(".container span").html("__________");
    // Create click handler
    $(".container span").click(convertSpanToInput);
});

函数convertSpanToInput（）{
//在跨距后插入输入
$（“”）.insertAfter（$（this））；
$（this.hide（）；//隐藏范围
$（this.next（）.focus（）；
$（“#tmp_输入”）.blur（函数（）{
//将输入值设置为范围内容
//当输入的焦点丢失时。
//同时删除输入。
var值=$（this.val（）；
$（this.prev（）.show（）；
$（this.prev（）.html（value）；
$（this.remove（）；
});
}
$（函数（）{
//使用占位符初始化所有跨距。
$（“.container span”）.html（“\uuuuuuuuuuuuuuuuuuuuuuu”）；
//创建单击处理程序
$（“.container span”）。单击（将span转换为输入）；
});

下面是一个html示例，您可以使用它进行测试：

<div class="container">
    My Name is = <span></span>. I'm <span></span> years old.
</div>


我的名字是=。我今年岁。

jsFIDLE:

用于关闭标记让我试试这个..谢谢。：）没问题。您可以对其进行改进，例如添加一项功能，以便能够使用tab键更改字段。很好：）谢谢：）我不知道：）

<div class="container">
    My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>

$(document).on('click', '#name', function(e){
    if( $("#myText").is(e.target))
        return;
    $(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});

$(document).on("blur", "#name", function(){
    $(this).html( $("#myText").val() );
});

function convertSpanToInput() {
    // Insert input after span
    $('<input id="tmp_input">').insertAfter($(this));
    $(this).hide(); // Hide span
    $(this).next().focus();
    $("#tmp_input").blur(function() {
        // Set input value as span content
        // when focus of input is lost.
        // Also delete the input.
        var value = $(this).val();
        $(this).prev().show();
        $(this).prev().html(value);
        $(this).remove();        
    });
}

$(function() {
    // Init all spans with a placeholder.
    $(".container span").html("__________");
    // Create click handler
    $(".container span").click(convertSpanToInput);
});

<div class="container">
    My Name is = <span></span>. I'm <span></span> years old.
</div>