以下代码中的自定义文本区域?

时间:2012-10-13 04:56:56

标签: javascript jquery html css textbox

请任何人帮助我使以下代码中的文本区域出现在保存按钮的所有区域。我提供了整个页面的代码。我使用过cdn托管的jquery。

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" href="my.css" />
        <style>
            /* App custom styles from google and microsoft*/
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
        </script>
        <script src="my.js">
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textarea1">
                            <h1 style='text-align:center;'>Please enter your notes here
                            </h1>
                        </label>
                        <textarea name="" id="textarea1" placeholder="">
                        </textarea>
                    </fieldset>
                </div>
                <input type="submit" data-icon="check" data-iconpos="left" value="Save" />
            </div>
        </div>
        <script>

        </script>
    </body>
</html>

2 个答案:

答案 0 :(得分:1)

这里是css3 http://css-tricks.com/box-sizing/的解决方案 和http://jsfiddle.net/cuyJ4/15/与jquery

的CSS:

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

答案 1 :(得分:0)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" href="my.css" />
        <style>

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
        </script>
        <script src="my.js">
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textarea1">
                            <h1 style='text-align:center;'>Please enter your notes here
                            </h1>
                        </label>
                        <textarea name="" id="textarea1" placeholder="" style="width:1246px;">
                        </textarea>
                    </fieldset>
                </div>
                <input type="submit" data-icon="check" data-iconpos="left" value="Save" />
            </div>
        </div>
        <script>

        </script>
    </body>
</html>

Try this. I am not sure if this is what you need.