为什么我的HTML输入字段默认为'只读'

时间：2016-05-18 17:04:31

标签： html css html5 css3

正如您所看到的，代码很简单，没什么特别的，但是当我在浏览器中打开时，输入字段是'readonly'。为什么？以及如何解决它？ 

<aside id="theAside">
  <div>
    <form action="#" method="post">
      <input type="text" name="username" placeholder="Username">
    </form>
  </div>
</aside>

function setHeight(){
    var pageHeight = window.innerHeight;
    var headerHeight = document.getElementById("bigHeader").clientHeight;
    var firstNavHeight = document.getElementById("firstNav").clientHeight;
    var theFooterHeight = document.getElementById("theFooter").clientHeight;

    var secondNavHeight = pageHeight - headerHeight - firstNavHeight - 30;
    var centerDivHeight = secondNavHeight + 27;
    var theSectionHeight = secondNavHeight - theFooterHeight - 45;
    var theAsideHeight = theSectionHeight;

    document.getElementById("secondNav").style.height = secondNavHeight + "px"; 
    document.getElementById("centerDiv").style.height = centerDivHeight + "px";
    document.getElementById("theSection").style.height = theSectionHeight + "px";
    document.getElementById("theAside").style.height = theAsideHeight + "px";
}
window.addEventListener("load", setHeight, false);
window.addEventListener("resize", setHeight, false);

以上是我的javascript代码..

信息：

  1. 是的，这段代码在另一个div中，我在其他div中浮动以构成整个页面

  2. 这是我网页上唯一的输入标记

  3. 我尝试了同样结果的更新chrome和firefox

1 个答案:

答案 0 :(得分：0)

之所以发生这种情况，是因为您目前的样式明确将z-index样式设置为-1，这会使任何元素无法对焦：

#centerDiv {
    overflow: hidden;
    background-color: white;
    height: 688px;
    position: relative;
    z-index: -1; /* This is the culprit */
}

如果您移除z-index样式或将其设置为非负值，您应该会看到可以按预期对焦并使用<input>。

示例

enter image description here 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*
     
===================================================
     
Custom styles
     
===================================================    
     
*/

html {
  height: 100%;
}
body {
  max-width: 100%;
  min-height: 100%;
  margin: auto;
  font-family: "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
}
header {
  height: 65px;
  overflow: hidden;
}
header h1 {
  float: left;
  margin: 21px 0px 4px 10px;
  font-size: 35px;
}
header h1 span {
  color: limegreen;
}
header h3 {
  float: right;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 40px 8px 0px 0px;
}
#firstNav {
  height: 46px;
  background-color: dimgray;
  box-shadow: 0px 5px 5px rgba(128, 128, 128, 0.6);
  position: relative;
  z-index: 5;
  overflow: hidden;
}
#firstNav li {
  display: inline-block;
  list-style-type: none;
  padding: 15px;
}
#firstNav a {
  text-decoration: none;
  color: white;
}
#firstNav li:hover {
  background-color: black;
}
#firstNav li:active {
  background-color: limegreen;
}
#secondNav {
  z-index: -1;
  float: left;
  background-color: whitesmoke;
  min-width: 13%;
  height: 658px;
  overflow-y: scroll;
  padding-bottom: 30px;
}
#secondNav:hover {
  overflow-y: scroll;
}
#secondNav h4 {
  margin-top: 15px;
  padding: 10px;
  font-size: 24px;
}
#secondNav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
#secondNav li a {
  text-decoration: none;
  padding: 8px 10px 8px 18px;
  color: black;
  display: block;
}
#secondNav a:hover {
  background-color: lightgray;
}
#centerDiv {
  overflow: hidden;
  background-color: white;
  height: 688px;
  position: relative;
  /* z-index: -1; */
}
#centerDiv section {
  float: left;
  width: 75%;
  border: 1px solid brown;
  height: 520px;
  margin: 10px;
  padding: 20px;
}
#centerDiv aside {
  border: 1px solid green;
  height: 520px;
  margin: 10px;
  padding: 20px;
  overflow: hidden;
}
#centerDiv footer {
  clear: both;
  font-size: 13px;
  text-align: center;
  padding: 10px;
  margin: 10px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  border: 1px solid limegreen;
  height: 55px;
  overflow: hidden;
  position: relative;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css">
  <script src="script.js"></script>
  <title>My First Website</title>
</head>

<body>
  <header id="bigHeader">
    <h1>w3schools<span>.com</span></h1>
    <h3>The world's largest web developer site</h3>
  </header>

  <nav id="firstNav">
    <ul>
      <li title="HTML Tutorial"><a href="#">HTML</a>
      </li>
      <li title="CSS Tutorial"><a href="#">CSS</a>
      </li>
      <li title="JAVASCRIPT Tutorial"><a href="#">JAVASCRIPT</a>
      </li>
      <li title="SQL Tutorial"><a href="#">SQL</a>
      </li>
      <li title="PHP Tutorial"><a href="#">PHP</a>
      </li>
      <li title="BOOTSTRAP Tutorial"><a href="#">BOOTSTRAP</a>
      </li>
      <li title="JQUERY Tutorial"><a href="#">JQUERY</a>
      </li>
      <li title="ANGULAR Tutorial"><a href="#">ANGULAR</a>
      </li>
      <li title="XML Tutorial"><a href="#">XML</a>
      </li>
    </ul>
  </nav>

  <nav id="secondNav">
    <h4>CSS Tutorial</h4>
    <ul>
      <li><a href="#">CSS HOME</a>
      </li>
      <li><a href="#">CSS Introduction</a>
      </li>
      <li><a href="#">CSS Syntax</a>
      </li>
      <li><a href="#">CSS How To</a>
      </li>
      <li><a href="#">CSS Colors</a>
      </li>
      <li><a href="#">CSS Backgrounds</a>
      </li>
      <li><a href="#">CSS Borders</a>
      </li>
      <li><a href="#">CSS Margins</a>
      </li>
      <li><a href="#">CSS Padding</a>
      </li>
      <li><a href="#">CSS Height/Width</a>
      </li>
      <li><a href="#">CSS Text</a>
      </li>
      <li><a href="#">CSS Fonts</a>
      </li>
      <li><a href="#">CSS Links</a>
      </li>
      <li><a href="#">CSS Lists</a>
      </li>
      <li><a href="#">CSS Tables</a>
      </li>
      <li><a href="#">CSS Box Model</a>
      </li>
      <li><a href="#">CSS Outline</a>
      </li>
      <li><a href="#">CSS Display</a>
      </li>
      <li><a href="#">CSS Max-width</a>
      </li>
      <li><a href="#">CSS Position</a>
      </li>
      <li><a href="#">CSS Float</a>
      </li>
      <li><a href="#">CSS Inline-block</a>
      </li>
      <li><a href="#">CSS Align</a>
      </li>
      <li><a href="#">CSS Combinators</a>
      </li>
      <li><a href="#">CSS Pseudo-class</a>
      </li>
      <li><a href="#">CSS Pseudo-element</a>
      </li>
      <li><a href="#">CSS Navigation Bar</a>
      </li>
      <li><a href="#">CSS Dropdowns</a>
      </li>
      <li><a href="#">CSS Tooltips</a>
      </li>
      <li><a href="#">CSS Image Gallery</a>
      </li>
      <li><a href="#">CSS Image Opacity</a>
      </li>
      <li><a href="#">CSS Image Sprites</a>
      </li>
      <li><a href="#">CSS Attr Selectors</a>
      </li>
      <li><a href="#">CSS Forms</a>
      </li>
      <li><a href="#">CSS Counters</a>
      </li>
    </ul>

    <h4>CSS3</h4>
    <ul>
      <li><a href="#">CSS3 Introduction</a>
      </li>
      <li><a href="#">CSS3 Rounded Corners</a>
      </li>
      <li><a href="#">CSS3 Border Images</a>
      </li>
      <li><a href="#">CSS3 Backgrounds</a>
      </li>
      <li><a href="#">CSS3 Colors</a>
      </li>
      <li><a href="#">CSS3 Gradients</a>
      </li>
      <li><a href="#">CSS3 Shadows</a>
      </li>
      <li><a href="#">CSS3 Text</a>
      </li>
      <li><a href="#">CSS3 Fonts</a>
      </li>
      <li><a href="#">CSS3 2D Transforms</a>
      </li>
      <li><a href="#">CSS3 3D Transforms</a>
      </li>
      <li><a href="#">CSS3 Transitions</a>
      </li>
      <li><a href="#">CSS3 Animations</a>
      </li>
      <li><a href="#">CSS3 Images</a>
      </li>
      <li><a href="#">CSS3 Buttons</a>
      </li>
      <li><a href="#">CSS3 Pagination</a>
      </li>
      <li><a href="#">CSS3 Multiple Columns</a>
      </li>
      <li><a href="#">CSS3 User Interface</a>
      </li>
      <li><a href="#">CSS3 Box Sizing</a>
      </li>
      <li><a href="#">CSS3 Flexbox</a>
      </li>
      <li><a href="#">CSS3 Media Queries</a>
      </li>
      <li><a href="#">CSS3 MQ Examples</a>
      </li>
    </ul>
  </nav>

  <div id="centerDiv">
    <section id="theSection">
      <article>
        article
      </article>
    </section>

    <aside id="theAside">

      <form action="#" method="post">
        <input type="password" name="username" placeholder="Username">
      </form>

    </aside>

    <footer id="theFooter">
      <p>W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
        of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2016 by Refsnes Data. All Rights Reserved. Powered by W3.CSS.</p>
    </footer>
  </div>


</body>

</html>

相关问题
最新问题