Question

此处的解决方案：http://jsfiddle.net/kralco626/E9XVr/53/

注意：我认为这是这个问题的重复：how to show text area on button click?但是，该问题的OP从未跟进过，我认为任何答案都没有实际回答这个问题。我认为Tomalak对这个问题的评论

在我看来，如果有的话，他想弹出一个textarea，等待输入，让用户按下一些'OK'按钮然后将结果存储在一个变量中。

几乎可以总结一下。

当用户点击按钮时，我希望打开一个文本区域，用户可以在其中输入一些文本，单击“确定”按钮，然后文本区域将关闭。

我不想要一个对话框，它太介入了，我只想要一个简单的简单textarea或类似的打开，以便文本区域的左上角位于按钮的左下角。

谢谢！

<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());
}

enter image description here

Answer 1

基本上你会想要这样的东西：

<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>

请注意，您需要根据需要相应地定义CSS。

Answer 2

好吧，我很快就把事情搞砸了 - 它与你的规格并不完全一致，但它有点类似。 See jsFiddle

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
});

与规格的主要区别在于，当您按“输入”而不是单击按钮时，textarea会关闭。如果那就是你想要的东西，那就不难修改了。

Answer 3

试试这个：

<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);
});

它也清除空间，因此它看起来像创建和删除了新的textarea

单击按钮打开文本区域 - Jquery

3 个答案: