jQuery中的可编辑文本框 [英] Editable textbox in jQuery

问题描述

我正在研究Asp.net MVC4应用程序。
我有用户信息和编辑按钮，以防任何用户想要编辑他/她的信息。

用户可以通过双击编辑他/她的信息它也是。
假设用户名在那里，那么用户可以通过点击它来编辑它。只要他点击UserName，它就可以在文本框中编辑它的值。

如何使用文本框编辑值？

我试过 -

  $（function（）{
 $（'。double'） .on（'dblclick'，function（）{
 var val = $（this）.html（）; 
 $（this）.append（'< input type =textvalue = val />'）; 
}）; 
}）; 
  

但是没有成功。

小提琴

解决方案

<尝试使用 contentEditable属性

  $（。double）。get（0）.contentEditable =true; 
  

contenteditable属性是一个枚举属性，其关键字是空字符串，真假。空字符串和真关键字映射到真实状态。 false关键字映射到false状态。另外，还有第三种状态，即继承状态，它是缺省值缺省值（以及无效值缺省值）。

DEMO1 |
DEMO2

I am working on Asp.net MVC4 application. I have user's information and edit button in case any user wants to edit his/her information.

A user can edit his/her information by double clicking on it also. Suppose if a username is there then user can edit it by clicking double on it. As soon as he clicks on UserName it is editable with its value in a textbox.

How can i make value editable with textbox?

I tried-

$(function(){
    $('.double').on('dblclick',function(){
        var val=$(this).html();
        $(this).append('<input type="text" value=val/>');
    });
});

But no success.

Fiddle

解决方案

Try to use contentEditable attribute

$(".double").get(0).contentEditable = "true";

the contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

DEMO1 | DEMO2

这篇关于jQuery中的可编辑文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！