我需要填写儿童空白表。当人们点击------(破折号)时,它应该变成一个文本框,人们可以输入它。之后,当他们在键入后从该元素移动时,它应该变成他们在该文本框内输入的文本。
我真的不知道怎么解决这个问题。我尝试了以下代码,但会发生什么,我无法在文本框内输入。光标根本没有出现
<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>
关于如何实现这一目标的任何指针?
谢谢,
答案 0 :(得分:3)
由于您已在整个文档中设置了侦听器,因此您将在每次单击时重新创建输入标记。尝试类似:
$('#name').on('click', function(){
this.innerHTML = "<input type=\"text\">";
$('#name').off('click')
}
单击span-element后,再次删除其上的侦听器,您应该可以键入。
答案 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:
答案 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/