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

时间:2015-01-12 16:15:58

标签: javascript jquery

我需要填写儿童空白表。当人们点击------(破折号)时,它应该变成一个文本框,人们可以输入它。之后,当他们在键入后从该元素移动时,它应该变成他们在该文本框内输入的文本。

我真的不知道怎么解决这个问题。我尝试了以下代码,但会发生什么,我无法在文本框内输入。光标根本没有出现

<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>

关于如何实现这一目标的任何指针?

谢谢,

5 个答案:

答案 0 :(得分:3)

由于您已在整个文档中设置了侦听器,因此您将在每次单击时重新创建输入标记。尝试类似:

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

单击span-element后,再次删除其上的侦听器,您应该可以键入。

http://jsfiddle.net/218rff9v/

答案 1 :(得分:1)

我建议你有输入框,不做任何转换

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

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

添加点击处理程序以添加已编辑的类,以便删除底部边框

input[type=text].edited{
    border:none;
}

这样你就不需要替换html元素了,你只需将它们设计成不同的颜色

答案 2 :(得分:1)

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

CSS:

.blurred{
    border-style: none none solid none;
    border-width: 0px 0px 1px 0px;
    border-bottom-color: #000000;
    padding: 0px;
}
.focused{
    border: 1px solid #999999;
    padding: 3px;
}

JavaScript的:

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

HTML:

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

检查这个jsfiddle:

http://jsfiddle.net/gwrfwmw0/

答案 3 :(得分:1)

http://jsfiddle.net/we6epdaL/2/

$(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() );
});

答案 4 :(得分:1)

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

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);
});

这是一个html示例,您可以使用它来测试它:

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

JsFiddle:http://jsfiddle.net/4dyjaax9/