【问题标题】:HTML form blocked, cannot enter any textHTML 表单被阻止,无法输入任何文本
【发布时间】:2016-08-25 03:47:37
【问题描述】:

您好,由于某种原因,我突然无法在 html 表单中输入任何文本。它以前有效,现在无效。我一直在使用 HTML、CSS 和 PHP 来写入数据库。有什么想法吗?它发生在我之前,因为我将一些 z 值设置为 -1 或其他东西,但我已经修复了它,现在它又以某种方式再次发生。

当我通过表单浏览时,我可以输入文本,但是当我将鼠标悬停在文本区域上时,不会显示光标。

<form action="dashboard.php" method="post">

    <div class="label"><span>Date </span><input type='date' class="datefield" name='date' /></div>

    <div class="label"><span>Department </span><input type="text" class="department" name="dept" value="" /></div>

    <div class="label"><span>Severity </span>
        <select name='seve' class="selectfield1">
                <option value="priority">Select</option>
                <option value="urgent">Urgent</option>
                <option value="high">High</option>
                <option value="medium">Medium</option>
                <option value="low">Low</option>
        </select>
    </div>

    <div class="label"><span>Status </span>
        <select name='stat' class="selectfield2">
                <option value="status">Select</option>
                <option value="progress">In progress</option>
                <option value="assigned">Assigned</option>
                <option value="completed">Completed</option>
                <option value="Delayed">Delayed</option> 
        </select>
    </div>

   <div class="label"><span>Assigned To </span><input type="text" class="assignedto" name="assi" value="" /></div>

    <div class="label"><span>Due By </span><input type="datetime-local" class="dueby" name="dueby"></div>

    <div class="label"><span>Description </span><textarea name="desc" class="description"></textarea></div>

    <div><span>&nbsp;</span><input type="submit" name="submit" value="Log Incident" /></div>
</form>

还有 CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:300); /* Here we import a font from Google's API in order to use it in our project as the default font. */

.form_heading{

font-family: "Roboto", sans-serif;
margin-bottom: 25px;
font-size: 25px;
padding-bottom: 7px; /* This block of CSS code designs the "Log Incidents" heading */
}

.dash_style {

position: relative;
top: 55px;
left: 200px;
}
.dash_style div{
display: block;
margin: 0px 0px 15px 0px; /* This block of CSS code decides on the spacing between all the boxes and their labels. */
}
.dash_style div > span{
width: 100px;
font-weight: bold;
float: left;
padding-top: ;
padding-right: 5px;
font-family: "Roboto", sans-serif; /* This block of CSS code designs the labels and decided how far away the boxes will be  */
}


.dash_style input.datefield{
width: 10%; /* This block of CSS code just changes the width of the data field box. */

}

.dash_style input.department, 
.dash_style input.assignedto,
.dash_style .input-field3,

.dash_style .selectfield
.dash_style .selectfield2{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #C2C2C2;
box-shadow: 1px 1px 4px #EBEBEB;
-moz-box-shadow: 1px 1px 4px #EBEBEB;
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 7px;
outline: none; /* This block of CSS code selects the different boxes by their specidied class and gives them a new look. */

}

.dash_style .description{
height:60px;
width: 20%; /* Here we decided how wide and tall the text area for the Incident Description will be */
}
.dash_style input[type=submit],
.dash_style input[type=button]{
border: none;
padding: 8px 15px 8px 15px;
width: 150px;
background: #336699;
color: #fff;
font-size: 15;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; /* This block of CSS code designs "Log Incident" button */
}
.dash_style input[type=submit]:hover,
.dash_style input[type=button]:hover{
background: #EA7B00;
color: #fff; /* The "Log Incident" button's background colour and hover effect are created here */

}

【问题讨论】:

  • 为什么不贴出与文本框相关的代码?
  • 代码?我们如何在没有代码查看的情况下调试问题?也许魔法妖精决定屏蔽你的网站?我们需要代码!如果您想向我们展示一个链接,那也很有帮助
  • 是的,请发布一个示例以便我们查看。没有它,我们将无法提供任何帮助。
  • 代码现在发布在问题中
  • 我无法使用此代码重现您的问题

标签: php html css forms


【解决方案1】:

您可以通过右键单击所需元素并从上下文菜单中选择 inspect element 自行解决此问题。

这将弹出开发者工具应用程序,该应用程序现在内置于 Chrome、Firefox 和 Opera 中(每一个都略有不同。例如,我更喜欢 Chrome 的开发工具)。

您将看到Elements 选项卡和Styles 窗格。请注意,您可以通过动态添加/禁用 CSS 来进行实验!非常有用的工具。

阅读这篇关于如何使用它的帖子,或在 YouTube 上搜索视频:

https://developer.chrome.com/devtools


您会注意到它在下面的堆栈代码片段中运行良好。很可能,您页面上的其他东西正在干扰 - 您可能在 z-index 的正确轨道上。

@import url(https://fonts.googleapis.com/css?family=Roboto:300); /* Here we import a font from Google's API in order to use it in our project as the default font. */

.form_heading{

  font-family: "Roboto", sans-serif;
  margin-bottom: 25px;
  font-size: 25px;
  padding-bottom: 7px; /* This block of CSS code designs the "Log Incidents" heading */
}

.dash_style {

  position: relative;
  top: 55px;
  left: 200px;
}
.dash_style div{
  display: block;
  margin: 0px 0px 15px 0px; /* This block of CSS code decides on the spacing between all the boxes and their labels. */
}
.dash_style div > span{
  width: 100px;
  font-weight: bold;
  float: left;
  padding-top: ;
  padding-right: 5px;
  font-family: "Roboto", sans-serif; /* This block of CSS code designs the labels and decided how far away the boxes will be  */
}


.dash_style input.datefield{
  width: 10%; /* This block of CSS code just changes the width of the data field box. */

}

.dash_style input.department, 
.dash_style input.assignedto,
.dash_style .input-field3,

.dash_style .selectfield
.dash_style .selectfield2{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #C2C2C2;
  box-shadow: 1px 1px 4px #EBEBEB;
  -moz-box-shadow: 1px 1px 4px #EBEBEB;
  -webkit-box-shadow: 1px 1px 4px #EBEBEB;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding: 7px;
  outline: none; /* This block of CSS code selects the different boxes by their specidied class and gives them a new look. */

}

.dash_style .description{
  height:60px;
  width: 20%; /* Here we decided how wide and tall the text area for the Incident Description will be */
}
.dash_style input[type=submit],
.dash_style input[type=button]{
  border: none;
  padding: 8px 15px 8px 15px;
  width: 150px;
  background: #336699;
  color: #fff;
  font-size: 15;
  box-shadow: 1px 1px 4px #DADADA;
  -moz-box-shadow: 1px 1px 4px #DADADA;
  -webkit-box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px; /* This block of CSS code designs "Log Incident" button */
}
.dash_style input[type=submit]:hover,
.dash_style input[type=button]:hover{
  background: #EA7B00;
  color: #fff; /* The "Log Incident" button's background colour and hover effect are created here */

}
<form action="dashboard.php" method="post">

  <div class="label"><span>Date </span><input type='date' class="datefield" name='date' /></div>

  <div class="label"><span>Department </span><input type="text" class="department" name="dept" value="" /></div>

  <div class="label"><span>Severity </span>
    <select name='seve' class="selectfield1">
      <option value="priority">Select</option>
      <option value="urgent">Urgent</option>
      <option value="high">High</option>
      <option value="medium">Medium</option>
      <option value="low">Low</option>
    </select>
  </div>

  <div class="label"><span>Status </span>
    <select name='stat' class="selectfield2">
      <option value="status">Select</option>
      <option value="progress">In progress</option>
      <option value="assigned">Assigned</option>
      <option value="completed">Completed</option>
      <option value="Delayed">Delayed</option> 
    </select>
  </div>

  <div class="label"><span>Assigned To </span><input type="text" class="assignedto" name="assi" value="" /></div>

  <div class="label"><span>Due By </span><input type="datetime-local" class="dueby" name="dueby"></div>

  <div class="label"><span>Description </span><textarea name="desc" class="description"></textarea></div>

  <div><span>&nbsp;</span><input type="submit" name="submit" value="Log Incident" /></div>
</form>

【讨论】:

  • 我看到它在那里工作,但由于某种原因它在我本地无法工作。
  • 如果您无法使用开发工具解决此问题,那么您可以考虑在评论中发布您的实际站点 URL,获得帮助,然后删除评论(注意出现在右侧的 X当您在评论末尾将鼠标悬停在您的姓名上时)。
  • 我正在本地开发它,所以除了我自己的本地主机之外,我没有 URL。但是,如果可行,我可以以某种方式将文件上传到保管箱吗?
猜你喜欢
  • 2017-08-27
  • 2018-07-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多