輸入文本框內的標籤

Question

我試圖實現下面給出的模型，我環顧四周找到類似的東西，但沒有運氣。有人能指導我如何做到這一點。

所以這裏的問題需要每次都顯示靜態的「從」到「和」90天「文本。

注意「發件人」，「收件人」，「天」和圖標應該是裏面的文本框

Answer 1

我有亂碼調整代碼，看看這個服務你的目的。 和輸入標籤的文本框中設置佔位符屬性裏面的標籤

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script 
 
    src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" 
 
    integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA=" 
 
    crossorigin="anonymous"></script> 
 

 
<script> 
 
$(function() { 
 
      $(".dp").datepicker(); 
 
     }); 
 

 

 
</script>

<style> 
 
div{position:relative;box-sizing:border-box;} 
 
.row{overflow:hidden;border:2px solid #aaa;padding:5px;} 
 
.r-left {float:left;width:30%;margin-right:10px;} 
 
.r-right{float:left;width:30%;margin:0 10px;} 
 
.farright{float:right;width:30%;margin-left:10px;} 
 
.inlineblock{display:inline-block;color: grey;} 
 
#90days{margin-left:15px;margin-top:-35px;color: red;} 
 

 
#datFrom{ 
 

 
    border: 0px; 
 
} 
 

 
#datTo{ 
 
border: 0px; 
 

 
} 
 

 
.floating-label { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 15px; 
 
    top: 20px; 
 
    transition: 0.2s ease all; 
 
    font-size: 20px; 
 
} 
 
.floating-label1 { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 215px; 
 
    top: 20px; 
 
    transition: 0.2s ease all; 
 
    font-size: 20px; 
 
} 
 

 
.inputText { 
 
    font-size: 14px; 
 
    width: 185px; 
 
    height: 35px; 
 
} 
 

 
input:focus ~ .floating-label,input:not(:focus):valid ~ .floating-label{ 
 
     top: 15px; 
 
    bottom: 10px; 
 
    left: 15px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    color: grey; 
 
} 
 

 
input:focus ~ .floating-label1,input:not(:focus):valid ~ .floating-label1{ 
 
     top: 15px; 
 
    bottom: 10px; 
 
    left: 215px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    color: grey; 
 
} 
 

 

 
.calender-css{ 
 
height:35px; 
 
vertical-align: middle; 
 

 
} 
 

 
input:focus { 
 
border-color:white; 
 

 
} 
 

 
</style>

<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script 
 
    src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" 
 
    integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA=" 
 
    crossorigin="anonymous"></script> 
 
<div class="row"> 
 
    <div class="r-left"> 
 
    <!--<div>FROM</div>--> 
 
    <div><input id="datFrom" class="dp inputText" type="text" required/><span class="floating-label">From</span></div> 
 
    </div> 
 
    <div class="r-right"> 
 
    <!--<div>TO</div>--> 
 
    <div><input id="datTo" class="dp inputText" type="text" required/><span class="floating-label1">TO</span></div> 
 
    </div> 
 
    <div class="farright"> 
 
    <div class="inlineblock" id="90days"> 
 
     90 days 
 
    </div> 
 
    <div class="inlineblock"> 
 
     <img src="http://www.freeiconspng.com/uploads/calendar-icon-png-14.png" class="calender-css" /> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 2

這是一個非常簡單的例子，意在讓你開始。

關鍵是：使用jQuery UI的「datepicker」模塊。它功能強大 - 您可以自動計算90天計算，並在離開「來自日期」字段後，將其自動計算90天，並將該日期作爲默認值拖入「發件人」字段中。

看看有多少你完成了多少。

$(".dp").datepicker(); 
 
/* */

div{position:relative;box-sizing:border-box;} 
 
.row{overflow:hidden;border:2px solid #aaa;padding:5px;} 
 
.r-left {float:left;width:33%;margin-right:10px;} 
 
.r-right{float:left;width:33%;margin:0 10px;} 
 
.farright{display:flex;height:50px;} 
 
    .inlineblock{width:60px;height:50px;margin:auto;flex-flow: row nowrap;justify-content:flex-end;align-content:center;}

<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script 
 
    src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" 
 
    integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA=" 
 
    crossorigin="anonymous"></script> 
 

 
<div class="row"> 
 
    <div class="r-left"> 
 
    <div>FROM</div> 
 
    <div><input id="datFrom" class="dp" type="text" /></div> 
 
    </div> 
 
    <div class="r-right"> 
 
    <div>TO</div> 
 
    <div><input id="datTo" class="dp" type="text" /></div> 
 
    </div> 
 
    <div class="farright"> 
 
    <div class="inlineblock"> 
 
     <br>90 days 
 
    </div> 
 
    <div class="inlineblock" id="90days"> 
 
     <img src="http://placeimg.com/50/50/nature" /> 
 
    </div> 
 
    </div> 
 
</div>