5 Текстовых полей, 2 Кнопки. Как присвоить текстовое поле для Нажимания на кнопку?
padding-left должны сделать свое дело!
РЕДАКТИРОВАТЬ: Как упоминалось @arieljuod, <em> также может быть использован. Таким образом, 2 <div> больше не нужны.
.call-out-text {
flex 1;
width: 100%;
padding-left: 10px;
border-left: 5px solid blue;
}
// EDIT
em {
padding-left: 10px;
border-left: 5px solid blue;
}
html, body {
/* https://material.io/design/typography/the-type-system.html# */
/* light: 300; regular: 400; medium: 500*/
font-family: 'Roboto', sans-serif;
line-height: 1.5;
font-weight: normal;
/* this sets 1rem = 16px*/
font-size: 16px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 100%;
/* border:1px solid rgba(250,0,0,1);*/
}
p {
font-size: 0.875rem;
font-weight: 300;
letter-spacing: 0.5px;
}
div .call-out {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
justify-content:space-evenly;
}
em {
padding-left: 10px;
border-left: 5px solid blue;
}
.call-out-text {
flex 1;
width: 100%;
padding-left: 10px;
border-left: 5px solid blue;
}<head>
<meta charset="UTF-8">
<title>FlexBox Nav</title>
<!-- light: 300; regular: 400; medium: 500 -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<div class="wrap">
<article>
<p>ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, beatae?</p>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>
<!-- EDIT -->
<em>Qwerty!</em>
<!-- Original option -->
<div class="call-out">
<div class="call-out-text">
<p><i>This is a callout bar. It displays something important or unusual that should provide the user with some extra information</i></p>
</div>
</div>
<p>Now we are back to normal text...</p>
</article>
</div>3 ответа
Я выполнил это самостоятельно, у меня была страница с двумя разными формами входа для разных типов пользователей. Что я сделал, так это разделил две формы на свои собственные элементы управления ASP Panel и на панели, установив для кнопки DefaultButton любую желаемую. Таким образом, когда они закончили печатать в форме и нажали клавишу ввода, он отправил бы на правильную кнопку.
Пример :
<asp:Panel id="panel1" DefaultButton="button1">
<asp:textbox id="textbox1"/>
<asp:textbox id="textbox2"/>
<asp:buton id="button1"/>
</asp:panel>
<asp:panel id="panel2" DefaultButton="button2">
<asp:textbox id="textbox3"/>
<asp:textbox id="textbox4"/>
<asp:button id="button2"/>
</asp:panel>
РЕДАКТИРОВАТЬ : Вот другой метод из как это сделать, назначив свойство OnKeyPress вашим текстовым полям. Это отдельное решение, которое я описал в самом верху.
Пример :
function clickButton(e, buttonid){
var evt = e ? e : window.event;
var bt = document.getElementById(buttonid);
if (bt){
if (evt.keyCode == 13){
bt.click();
return false;
}
}
}
//code behind
TextBox1.Attributes.Add("onkeypress",
"return clickButton(event,'" + Button1.ClientID + "')");
Приведенный ниже код генерирует следующий код:
<input name="TextBox1" type="text" id="TextBox1" onkeypress="return
clickButton(event,'Button1')" />
В этой ситуации я бы сгруппировал соответствующие текстовые поля и кнопку на панели. Панель имеет свойство DefaultButton, которое вы можете использовать. DefaultButton = "IdOfTheDefaultButtonForControlsInThisPanel"
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.defaultbutton.aspx
Используя jQuery , это довольно легко сделать:
$(function ()
{
$("#id-of-textbox-1, #id-of-textbox2, etc.").keyup(function (e)
{
if (e.keyCode === 13) $("#id-of-submit-button-1").click();
});
// And for the second group
$("#id-of-textbox-3, #id-of-textbox4, etc.").keyup(function (e)
{
if (e.keyCode === 13) $("#id-of-submit-button-2").click();
});
});
Если вы используете ASP. NET Кнопка контролирует, не забудьте установить для свойства UseSubmitBehavior значение false.