点击按钮时打开文本区域 - Jquery

Question

点击按钮时打开文本区域 - Jquery

3

解决方案在此：http://jsfiddle.net/kralco626/E9XVr/53/ 注意：我认为这是一个重复的问题：如何在按钮单击时显示文本区域？但是，那个问题的 OP 从未跟进，我认为任何答案都没有回答这个问题。我认为 Tomalak 在那个问题的评论中说得很清楚：

“我认为，如果有什么东西，他想要弹出一个文本区域，等待输入，让用户按下一些'OK'按钮，然后将结果存储在变量中。”

基本上就是这样。

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

我不想要一个对话框，它太过于侵入性，我只想要一个简单的纯文本区域或类似的东西，以便文本区域的左上角位于按钮的左下角。

谢谢！

<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

- kralco626

1

就像 StackOverflow 上的“添加评论”功能一样？点击一个按钮，一个文本区域就会神奇地出现，然后在按下另一个按钮时关闭（可能会改变其他地方的内容）？ - lonesomeday

1

@lonesomeday，但是我希望它出现在其他所有内容的上方。它将会在网格中，所以我不希望所有东西都四处移动。可能应该提到这一点。 - kralco626

等等，你需要一个模态框吗？我以为不需要，因为你说对话框太过于侵入性了，而模态框几乎和对话框一样具有侵入性。 - Josh Leitzel

不，它不需要是模态的。我想它可以被描述为一个非模态对话框，在按钮下方打开，但不带任何额外的负担。只有一个文本区域和一个小而简单的确定按钮，没有边框、标题栏或其他东西。它将通过一个“关闭”按钮或在文本区域之外点击来关闭。 - kralco626

我为造成的困惑道歉，沟通能力从未是我的第一专长 :) - kralco626

3个回答

2

好的，我很快地做了一些东西 - 它并不完全符合您的规格，但它是类似的。查看 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
});

主要区别在于，当你按下“Enter”键时，文本区域会关闭，而不是单击按钮。如果您需要这样的修改，那么修改并不难。

- lonesomeday

1

我喜欢这个输入的想法！我想看看是否可以在按下回车键，OK按钮或取消按钮时关闭它。看起来应该能够工作！ - kralco626

@kraico626 你需要创建一个容器元素（可能是 div），并将文本区域和按钮放入其中，然后将 div 插入到文档中，并适当地进行样式设置。从发布的代码中应该可以清楚地了解如何做到这一点。 - lonesomeday

@lonesomeday 你认为将textarea的引用传递给按钮，并使按钮的onclick关闭textarea是一个好主意吗？另外，有没有想法让它在点击textarea外部时具备“取消”功能而关闭？ - kralco626

啊，一旦我在它周围包裹一个div，就会失去文本区域的漂亮干净外观和展开选项... http://jsfiddle.net/E9XVr/13/ - kralco626

@kraico626 我对 jsFiddle 进行了一些更新 -- 看一下。 - lonesomeday

@lonesomeday - 我喜欢它。我做了一些额外的更改，我认为它非常好用！http://jsfiddle.net/kralco626/E9XVr/48/ 你可以同时从不同的按钮打开多个，但只能从任何一个按钮打开一个，点击外部关闭所有，点击取消或确定仅关闭该选项卡。这应该很好用！感谢您的帮助！ - kralco626

-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").fadeIn(4000);
});
$("#textarea-ok").click(function(){
      $("#textarea").fadeOut(4000);
});

它还清除了空间，因此看起来像是创建和删除了新的文本区域

- Deepika

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Leitzel · Accepted Answer

基本上您需要像这样的东西：

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