text jquery对话框内的区域

textArea inside jquery dialog box

本文关键字：区域 对话框 jquery text      更新时间：2023-09-26

如何在对话框中创建文本区域，并且该文本区域应该是使用jQuery UI创建的必填字段。以下是我在对话框上创建提交和关闭按钮的代码，但无法创建文本区域，当用户通过该代码单击提交按钮时，该区域应为必填字段。请提出建议。请找到工作样品http://jsfiddle.net/M4QM6/34/。

    function showDialog1(){
        $("#dialog").html("");
        $("#dialog").dialog("option", "title", "Loading....").dialog("open");
        $("span.ui-dialog-title").text('title here'); 
        $("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            width:"350",
            height:300,
            modal: true,
            buttons: {
                "Submit": function() {
                    $(this).dialog("close");
                }
            }
        });
    }

谢谢。

在$("#dialog").("html")之后插入；以下内容：$("#dialog").append('<textarea class="mandatory"></textarea>')；

在提交之前，请按他的类检查文本区域是否有值。

if($(".mandatory").text().lenght>0) {
// do submit
} else {
// show error message(eg. Mesaage must       not be empty)
}

您可以通过在html()中添加textarea标签来完成，如下所示，

Dialog1<input type="submit" value="dialog1" onclick="return showDialog1()"/>
<div id="dialog"></div>
<br>
    <script>
                function showDialog1(){
        $("#dialog").html("<textarea name="testArea" required cols='5' rows='3'>your text here</textarea>");
            $("#dialog").dialog("option", "title", "Loading....").dialog("open");
            $("span.ui-dialog-title").text('title here'); 
            $("#dialog").dialog({
                autoOpen: false,
                resizable: true,
                width:"350",
                height:300,
                modal: true,
                buttons: {
                    "Close": function() {
                        $(this).dialog("close");
                    }
                }
            });
        }
    </script>

您可以通过添加required属性使其成为必填字段

请参阅此处更新的Jsfidle

嗯。。。只需在#dialog:中放入一个<textarea>

$("#dialog").html("<textarea id="myarea" />");

应在提交表格时进行验证：

$('form').submit(function(event) {
    if ($("#myarea").text() === "" ) {
        event.preventDefault();
    }
});

jQuery UI将以模式显示您在#dialog中输入的text.html

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        resizable: true,
        width: "350",
        height: 300,
        modal: true,
        buttons: {
            "Close": function () {
                // if textarea is not empty close the modal and do something with the value
                if ($(this).find('textarea').val().length) $(this).dialog("close");
                else $(this).find('textarea').css({borderColor: 'red'});
            }
        }
    });
});
function showDialog1() {
    $('#dialog').find('textarea').val(''); // clear textarea on modal open
    $("#dialog").dialog("option", "title", "Loading....").dialog("open");
    $("span.ui-dialog-title").text('title here');
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
Dialog1
<input type="submit" value="dialog1" onclick="return showDialog1()" />
<div id="dialog">
    <p>
        <textarea></textarea>
    </p>
</div>
<br>

相关文章：