Javascript動態添加文本框，並再次將文本框轉換爲文本

我需要填充空白表格中的內容。當人們點擊------（破折號）時，它應該變成文本框，人們可以輸入它。之後，當他們在打字後從該元素移開時，它應該變成他們在該文本框內輸入的文本。Javascript動態添加文本框，並再次將文本框轉換爲文本

我真的不知道如何解決這個問題。我嘗試了下面的代碼，但是會發生什麼，我無法在文本框內鍵入內容。光標沒有出現在所有

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

任何指針如何實現這個？

感謝，

來源

2015-01-12 Bala

使用關閉標籤 –

這是發生在你的容器中的所有跨度希望行爲的一個例子。一些細節可以改進，但我認爲它按預期工作。

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/

來源

2015-01-12 16:38:58 Guillermo

讓我試試這個..謝謝。 :) – Bala

哇！作品像魅力:)非常感謝:) – Bala

沒問題。你可以改進它，例如通過添加功能以便能夠使用Tab鍵更改字段。 – Guillermo

我建議你輸入框，不要做任何轉換

只需使用CSS來刪除邊框，並添加虛線邊框底部

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

加點擊處理程序添加已編輯的類，以便您可以刪除底部邊框

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

T你不需要替換html元素，你只需要讓它們看起來不同

來源

2015-01-12 16:22:40 atmd

由於你已經在整個文檔上設置了監聽器，所以每次點擊都會重新創建輸入標籤。請嘗試如下所示：

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

單擊span-element後，再次移除偵聽器，您應該可以鍵入。

http://jsfiddle.net/218rff9v/

來源

2015-01-12 16:25:58

尼斯:)謝謝:)我不知道這一點:) – Bala

爲什麼不使用文字輸入和唯一的改變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/

來源

2015-01-12 16:28:51

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

來源

2015-01-12 16:34:21

Javascript動態添加文本框，並再次將文本框轉換爲文本

回答

相關問題