我正在开发网络应用程序,我有这样的要求,每当用户点击跨度内的文本我需要将其转换为输入字段和模糊我需要将其转换回跨度再次.所以我在我的一个jsp页面中使用以下脚本.
Java脚本：
<script type="text/javascript">
function covertSpan(id){
$('#'+id).click(function() {
var input = $("<input>",{ val: $(this).text(),type: "text" });
$(this).replaceWith(input);
input.select();
});
$('input').live('blur',function () {
var span=$("<span>",{text:$(this).val()});
$(this).replaceWith(span);
});
}
JSP代码：
<span id="loadNumId" onmouSEOver="javascript:covertSpan(this.id);">5566</span>
现在我的问题是,一切都只是第一次正常.我的意思是每当我第一次点击跨度内的文本时,它会转换为输入字段,并再次onblur它会从输入字段转换回正常文本.但如果再次尝试这样做,它将无法正常工作.以上脚本有什么问题？
解决方法
流浪者 – 为了节省你一些时间,这个答案底部的最后一个选项很可能是你的首选解决方案.
我相信这就是你要找的东西：http://jsfiddle.net/2D9FW/
var switchToInput = function () {
var $input = $("<input>",{
val: $(this).text(),type: "text"
});
$input.addClass("loadNum");
$(this).replaceWith($input);
$input.on("blur",switchToSpan);
$input.select();
};
var switchToSpan = function () {
var $span = $("<span>",{
text: $(this).val()
});
$span.addClass("loadNum");
$(this).replaceWith($span);
$span.on("click",switchToInput);
};
$(".loadNum").on("click",switchToInput);
我使用了一个类而不是一个ID,所以你可以做多个,但你可以根据需要将其切换回来.如果您想使用ID：http://jsfiddle.net/2D9FW/1/
最近有人提高了这一点,所以我的注意力又回到了原点.这是另一种方法(稍微更改DOM)：http://jsfiddle.net/2khuobze/
<div class="inputSwitch"> First Name: <span>John</span><input /> </div> <div class="inputSwitch"> Last Name: <span>Doe</span><input /> </div>
JS
$(".inputSwitch span").on("click",function() {
var $this = $(this);
$this.hide().siblings("input").val($this.text()).show();
});
$(".inputSwitch input").on("blur",function() {
var $this = $(this);
$this.hide().siblings("span").text($this.val()).show();
}).hide();
此外,如果你想支持选择所有焦点和标签以进入下一个/上一个跨度/输入,你可以这样做(我最喜欢这个选项)：http://jsfiddle.net/x33gz6z9/
var $inputSwitches = $(".inputSwitch"),$inputs = $inputSwitches.find("input"),$spans = $inputSwitches.find("span");
$spans.on("click",function() {
var $this = $(this);
$this.hide().siblings("input").show().focus().select();
}).each( function() {
var $this = $(this);
$this.text($this.siblings("input").val());
});
$inputs.on("blur",function() {
var $this = $(this);
$this.hide().siblings("span").text($this.val()).show();
}).on('keydown',function(e) {
if (e.which == 9) {
e.preventDefault();
if (e.shiftKey) {
$(this).blur().parent().prevAll($inputSwitches).first().find($spans).click();
} else {
$(this).blur().parent().nextAll($inputSwitches).first().find($spans).click();
}
}
}).hide();
