javascript 单击按钮打开文本区域 - Jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6030044/
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
open a text area on click of a button - Jquery
提问by kralco626
Solution here: http://jsfiddle.net/kralco626/E9XVr/53/
解决方案在这里：http: //jsfiddle.net/kralco626/E9XVr/53/
Note: I think this is a duplicate of this question: how to show text area on button click?However, the OP of that question never followed up and I don't think any of the answers actually answer the question. I think Tomalak's comment on that question
注意：我认为这是这个问题的重复：如何在按钮单击时显示文本区域？但是，该问题的 OP 从未跟进，我认为任何答案实际上都没有回答这个问题。我认为 Tomalak 对这个问题的评论
Seems to me that, if anything, he wanted to pop up a textarea, wait for input into it, have the user press some 'OK' button then store the result in a variable.
在我看来，如果有的话，他想弹出一个文本区域，等待输入，让用户按下某个“确定”按钮，然后将结果存储在一个变量中。
Pretty much sums it up.
总结的差不多。
When the user clicks a button, I would like a text area to open in which the user can enter some text click an OK button and then the text area will close.
当用户单击按钮时，我希望打开一个文本区域，用户可以在其中输入一些文本，单击“确定”按钮，然后文本区域将关闭。
I don't want a dialog box, it's too intrusive, I want just a plain simple textarea or similar to open so that the top left of the text area is positioned at the bottom left of the button.
我不想要一个对话框，它太烦人了，我只想打开一个简单的 textarea 或类似的文本区域，以便文本区域的左上角位于按钮的左下角。
Thanks!
谢谢！
<span style="width:20px;height:20px" class="remarkButton"></span>
$(".remarkButton").button({ icons: { primary: "ui-icon-pencil" }, text: false }).click(function () {
$(...something to show text area...).data("$clickedButton",$(this));
});
//called when the OK button on the text area is clicked
function saveRemark($referenceToTextArea)
{
$referenceToTextArea.data("$clickedButton").data("remark",$referenceToTextArea.text());
}
采纳答案by lonesomeday
OK, I've knocked something up very quickly -- it doesn't exactly match your specifications, but it's something similar. See jsFiddle.
好的，我很快就搞定了一些东西——它不完全符合你的规格，但它是类似的。 参见 jsFiddle。
The Javascript:
Javascript：
$('#foo').click(function() { // the button - could be a class selector instead
var button = $(this),
commentField = $('<textarea/>'); // create a textarea element
commentField
.css({
position: 'absolute',
width: 200, // textbox 200px by 100px
height: 100,
// position the textarea directly over the button
left: button.offset().left + (button.outerWidth() / 2) - 100,
top: button.offset().top + (button.outerHeight() / 2) - 50
})
// set the textarea's value to be the saved content, or a default if there is no saved content
.val(button.data('textContent') || 'This is my comment field\'s text')
// set up a keypress handler on the textarea
.keypress(function(e) {
if (e.which === 13) { // if it's the enter button
e.preventDefault(); // ignore the line break
button.data('textContent', this.value); // save the content to the button
$(this).remove(); // remove the textarea
}
})
.appendTo(document.body); // add the textarea to the document
});
The main difference to the specification is that the textarea closes when you press "enter", not on clicking a button. It wouldn't be hard to modify if that's what you want.
与规范的主要区别在于 textarea 在您按下“enter”时关闭，而不是在单击按钮时关闭。如果那是您想要的，那么修改并不难。
回答by Josh Leitzel
Basically you'll want something like this:
基本上你会想要这样的东西：
<button id="showarea" name="showarea" type="button" value="Show Textarea" />
<textarea id="textarea" name="text"></textarea>
<button id="textarea-ok" name="ok" type="button" value="Ok" />
<script type="text/javascript">
$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
$("#textarea").show();
});
$("#textarea-ok").click(function(){
$("#textarea").hide();
});
</script>
Note that you'll need to define the CSS accordingly as you prefer.
请注意，您需要根据自己的喜好相应地定义 CSS。
回答by Deepika
try this:
试试这个：
<button id="showarea" name="showarea" type="button" value="Show Textarea" />
<textarea id="textarea" name="text"></textarea>
<button id="textarea-ok" name="ok" type="button" value="Ok" />
<script type="text/javascript">
$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
$("#textarea").fadeIn(4000);
});
$("#textarea-ok").click(function(){
$("#textarea").fadeOut(4000);
});
It clears the space also so it looks like new textarea created and removed
它也清除了空间，因此它看起来像创建和删除了新的 textarea
