javascript 单击按钮时使字段可编辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19975806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make fields editable when a button is clicked
提问by Anna
the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:
我的应用程序的用户应该能够通过单击“更改”按钮来更改电子邮件和电话号码，这是我的代码：
<div class="field-group">
...............
....................
<div class="field field-omschrijving">
<label class="label">E-mailadres</label><div>@client.email</div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label><div>@client.phoneNumber</div>
</div>
<input type="submit" class="form-submit" value="Change" name="op">
</div><!-- /.field-group -->
I've been looking for a solution but no success, any idea about how can I do it? Thanks!
我一直在寻找解决方案但没有成功，知道我该怎么做吗？谢谢！
Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:!
I want it looks like this:
非常感谢您的快速回复！但是..我的错误，我想说的是字段应该以“正常方式”显示，当用户单击按钮更改时，它应该更改为“可编辑方式”，现在字段电子邮件如下所示： ！我希望它看起来像这样：
And after clicking in the "Change" button it has to look like the first image. Thanks again!
单击“更改”按钮后，它必须看起来像第一个图像。再次感谢！
采纳答案by sergio
Using this code after click you can change your label to input, as in you pictures. It will help you now, hope
单击后使用此代码，您可以将标签更改为输入，如图片所示。现在它会帮助你，希望
$( ".button_class" ).click(function() {
$('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
});
Here is an example:
下面是一个例子：
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
$( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}
Result is:
结果是：
<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
Hope, it will help
希望，它会有所帮助
回答by user2249160
Give id to button and input fields for email and ph no. On click of button, hide the lebel and show input fields.
为电子邮件和电话号码的按钮和输入字段提供 id。单击按钮时，隐藏 lebel 并显示输入字段。
<div class="field-group">
<div class="field field-omschrijving">
<label class="label">E-mailadres</label>
<div id="divemail">@client.email</div>
<div id="divemailinput"><input type="text" id="emailId"/></div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label>
<div id="divno">@client.phoneNumber</div>
<div id="divnoinput"><input type="text" id="emailId"/></div>
</div>
<input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->
JS
JS
$("#btnchange").click(function(){
$("#divemail").hide();
$("#divemailinput").hide();
$("#divno").hide();
$("#divnoinput").hide();
});
回答by sergio
For the first you need is put your @client.emailand @client.phoneNumber into inputs and set them inactive. Then, and after clicking change them to active by using javascript.
首先，您需要将 @client.email 和 @client.phoneNumber 放入输入并将它们设置为非活动状态。然后，单击后使用 javascript 将它们更改为活动状态。
<input type="text" class="emailand_clas" readonly="readonly" >@client.emailand </input>
and using jquery:
并使用 jquery：
$( ".button_class" ).click(function() {
$('.emailand_clas').attr('readonly','')
});
Some thing like this
像这样的事情
回答by Ankit Tyagi
<label class="label">E-mailadres</label>
<input type="text" class='email' value='@client.email' />
document.getElementsByClassName('form-submit').onclick=function(){
document.getElementsByClassName('email').disabled=false;
};
回答by biniam
Look at this JSFiddle or my blogfor a great example.
看看这个 JSFiddle 或我的博客的一个很好的例子。
http://jsfiddle.net/biniama/YDcFF/
http://jsfiddle.net/biniama/YDcFF/
<!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
$('#submitBtn').click(function(){
$('.enableOnInput').prop('disabled', false);
$('#submitBtn').val('Update');
});
});
</script>
<style type='text/css'>
/* Lets use a Google Web Font :) */
@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
/* Basic CSS for positioning etc */
body {
font-family: 'Finger Paint', cursive;
background-image: url('bg.jpg');
}
#frame {
width: 700px;
margin: auto;
margin-top: 125px;
border: solid 1px #CCC;
/* SOME CSS3 DIV SHADOW */
-webkit-box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow: 0px 0px 10px #CCC;
box-shadow: 0px 0px 10px #CCC;
/* CSS3 ROUNDED CORNERS */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #FFF;
}
#searchInput {
height: 30px;
line-height: 30px;
padding: 3px;
width: 300px;
}
#submitBtn {
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
}
#frame h1 {
text-align: center;
}
#frame div {
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='frame'>
<div class='search'>
<h1>jQuery Enable and Disable button</h1>
<input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>
<input type='submit' name='submit' id='submitBtn' value='Edit'/>
</div>
</div>
</body>
</html>
回答by Sanket Patel
Now HTML5 is available so . We can use attribute
现在 HTML5 可用，所以 . 我们可以使用属性
contenteditable
内容可编辑
More help and details http://html5doctor.com/the-contenteditable-attribute/
更多帮助和细节 http://html5doctor.com/the-contenteditable-attribute/
