Укладка скрытого ввода

Я пытаюсь создать скрытое поле ввода, но я не понимаю, как это правильно.Укладка скрытого ввода

Может показаться странным, пытаясь создать окно ввода, которое скрыто - причина заключается в том, что текст в этих полях отображается при нажатии кнопки отправки, и я хотел бы изменить шрифт и цвет, чтобы он соответствовал остальной части страницы.

код ниже (я просто удалил информацию о компании в URL-адресах)

<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>

источник

2016-06-22 SkylarN

Вы делаете это необычный способ. Использование полей ввода для этой цели не является семантически правильным. Я бы использовал javascript или flashdata, чтобы добавить нужные вам сообщения в правильные теги HTML. Если вы настаиваете на использовании полей ввода, попробуйте использовать текстовые поля, а не скрытые поля, и используйте CSS, чтобы скрыть их. –

Вместо этого используйте 'input' с классом 'hidden' и скройте его с помощью' style = "display: none" '. Позже вы можете сделать это видимым, установив его обратно на дисплей 'style =": initial "' – Pugazh

вы можете использовать этот класс:

.Hidden{ 
display:none; 
}

и вы можете вызывать этот класс для всех объектов, которые вам нужны скрывать.

источник

2016-06-22 14:24:09

, чтобы показать снова, можно использовать –

. Показать {display: initial;} –

Вместо этого используйте обычное текстовое поле с классом «скрыто», имеющее стиль display: none. Это скроет текстовое поле.

Вы можете сделать его видимым, установив display назад initial с помощью JavaScript, как

document.getElementsByName('author')[0].style.display = 'initial';

Snippet:

<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>

источник

2016-06-22 14:30:15 Pugazh

Спасибо, это почти работает, но почему-то стиль содержимое, которое после нажатия кнопки «Отправить» (т. е. «Добро пожаловать». Подождите, пока мы свяжемся с представителем службы поддержки клиентов.), похоже, не тянет и по-прежнему отображается другим шрифтом? – SkylarN

1) Добавить класс для тех скрытых входов (назовем его "скрытое")

2) Добавить любые стили, как этот

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

3) Назовите что-то, чтобы это сделать их видимыми

if(document.getElementById(id).getAttribute('type') == 'hidden') { 
    document.getElementById(id).setAttribute('type', 'text'); 
}

источник

2016-06-22 14:30:39

Спасибо, но это не так. похоже, работает – SkylarN

Укладка скрытого ввода

ответ

Смежные вопросы