设置隐藏的输入

时间：2016-06-22 14:12:53

标签： html css forms

我正在尝试设置隐藏的输入字段，但我没有把它完全正确。

尝试设置隐藏的输入框可能听起来很奇怪 - 原因是单击提交按钮后会显示这些字段中的文本，我想更改字体和颜色以使其与其他部分匹配页面。

下面的代码（我刚删除了网址中的公司详细信息）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/base-asbestos.css">
    <link rel="stylesheet" href="css/responsive-widths.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/responsive-layout-asbestos.css">
    <script language="JavaScript">
        function updateAuthor(theForm) {
            if (theForm.extensionField_Name) {
                if (theForm.extensionField_Name.value != "") {
                    theForm.author.value = theForm.extensionField_Name.value;
                    theForm.extensionField_Name.name = 'extensionField_h_Name';
                    return (true);
                }
            }
            if (theForm.extensionField_Email) {
                if (theForm.extensionField_Email.value != "") {
                    theForm.author.value = theForm.extensionField_Email.value;
                    theForm.extensionField_Email.name = 'extensionField_h_Email';
                    return (true);
                }
            }
            return (true);
        }
    </script>

    <link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
    <style type="text/css">
        .chat {
            color: #404040;
            font-weight: 700;
            font-size: 1.2em;
            font-family: 'Signika', sans-serif;
        }


        input[type=submit] {
            color: #404040;
            font-weight: 700;
            font-size: 0.95em;
            font-family: 'Signika', sans-serif;
        }

        chat2 {
            color: #25ab9a;
            font-weight: 700;
            font-size: 0.95em;
            font-family: 'Signika', sans-serif;
        }
    </style>
</head>
<body class="intenal standard_colours" style="position: relative;  top: 0;">
    <div class="chat">

        <form action="https://test.uk/ccp/chat/form/100000" method="post" onsubmit="return updateAuthor(this)">
            <style type="text/css">
                span {
                    display: inline-block;
                    width: 120px;
                }
            </style>
            <span>Name:</span><input type="text" name="extensionField_Name" /><br /><br>
            <span>Email:</span><input type="text" name="extensionField_Email" /><br />            <br>
            <span>Phone number:</span><input type="text" name="extensionField_PhoneNumber" /><br /><br>
            <span>Category:</span>
            <select name="extensionField_ccxqueuetag">
                <br />
                <option value="Chat_Csq7">General</option>
            </select><br><br />
            <input type="submit" value="Submit" /><input type="hidden" name="author" value="Customer" /><br />

            <input type="hidden" name="title" value="ccx chat" /><br />
            <input type="hidden" name="extensionField_h_widgetName" value="ChatGeneral" /><br />
            <!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
            Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
            <input type="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg"><br />
            <input type="hidden" name="extensionField_chatWaiting" value="Welcome.         Please wait while we connect you to a customer care representative.">
            <input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
            <input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
    </div>
    </form>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

你可以使用这个类：

.Hidden{
display:none;
}

您可以为需要隐藏的所有对象调用此类。

答案 1 :(得分：0)

而是使用普通文本框与课程＆＃34; 隐藏＆＃34;风格display: none。这将隐藏文本框。

您可以使用像

这样的JavaScript将display设置回initial，以使其可见 
document.getElementsByName('author')[0].style.display = 'initial';

<小时/> 的段：

＆＃13;
＆＃13; 
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/base-asbestos.css">
  <link rel="stylesheet" href="css/responsive-widths.css">
  <link rel="stylesheet" href="css/form.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/responsive-layout-asbestos.css">
  <script language="JavaScript">
    function updateAuthor(theForm) {

      /* Use this code to display the element */
      document.getElementsByName('author')[0].style.display = 'initial';


      if (theForm.extensionField_Name) {
        if (theForm.extensionField_Name.value != "") {
          theForm.author.value = theForm.extensionField_Name.value;
          theForm.extensionField_Name.name = 'extensionField_h_Name';
          return (true);
        }
      }
      if (theForm.extensionField_Email) {
        if (theForm.extensionField_Email.value != "") {
          theForm.author.value = theForm.extensionField_Email.value;
          theForm.extensionField_Email.name = 'extensionField_h_Email';
          return (true);
        }
      }
      return (true);
    }
  </script>

  <link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
  <style type="text/css">
    .chat {
      color: #404040;
      font-weight: 700;
      font-size: 1.2em;
      font-family: 'Signika', sans-serif;
    }
    input[type=submit] {
      color: #404040;
      font-weight: 700;
      font-size: 0.95em;
      font-family: 'Signika', sans-serif;
    }
    chat2 {
      color: #25ab9a;
      font-weight: 700;
      font-size: 0.95em;
      font-family: 'Signika', sans-serif;
    }
    /* Use this to hide the input text box */
    .hidden {
      display: none;
    }
  </style>
</head>

<body class="intenal standard_colours" style="position: relative;  top: 0;">
  <div class="chat">

    <form action="https://test.uk/ccp/chat/form/100000" method="post" onSubmit="return updateAuthor(this)">
      <style type="text/css">
        span {
          display: inline-block;
          width: 120px;
        }
      </style>
      <span>Name:</span>
      <input type="text" name="extensionField_Name" />
      <br/>
      <br>
      <span>Email:</span>
      <input type="text" name="extensionField_Email" />
      <br/>
      <br>
      <span>Phone number:</span>
      <input type="text" name="extensionField_PhoneNumber" />
      <br/>
      <br>
      <span>Category:</span>
      <select name="extensionField_ccxqueuetag">
        <br/>
        <option value="Chat_Csq7">General</option>
      </select>
      <br>
      <br/>
      <input type="submit" value="Submit" />
      <input type="text" class="hidden" name="author" value="Customer" />
      <br/>

      <input type="text" class="hidden" name="title" value="ccx chat" />
      <br/>
      <input type="text" class="hidden" name="extensionField_h_widgetName" value="ChatGeneral" />
      <br/>
      <!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
      <input type="text" class="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg">
      <br/>
      <input type="text" class="hidden" name="extensionField_chatWaiting" value="Welcome.         Please wait while we connect you to a customer care representative.">
      <input type="text" class="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
      <input type="text" class="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
  </div>
  </form>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

1）为这些隐藏的输入添加一个类（让我们称之为＆＃34; hiddenField ＆＃34;）

2）添加这样的样式

.hiddenField{
 font-color:red;
 font-size:12px;
}

3）调用一些东西使它们可见

if(document.getElementById(id).getAttribute('type') == 'hidden') {
   document.getElementById(id).setAttribute('type', 'text');
}
相关问题
最新问题