Question

我有这个输入：

  <input type="number" class="textfield numberField font"  name="Price" placeholder="Price"><br>

因此，文本place holder是价格。当用户开始输入内容时，我想保留price一词。

因此，如果他键入 65 ，他将在输入中看到：

Price 65

我是否需要在单词price内创建另一个div，还是可以使用js或html来完成？

Answer 1

我想你想成为那样。

  
.full-input {
  display: inline-block;
  padding: 3px;
  border: 2px solid blue;
}
input {
  outline: none;
  border: none;
  display: inline-block;
  line-height: 1.2em;
  font-size: 14pt;
}
label {
  display: inline-block;
  font-size: 12px;
  color: blue;
}

<div class='full-input'><label for='price'>Price</label>
  <input type='number'class="textfield numberField font"  name="Price">
 </div>

Answer 2

一种方法是检查value是否等于空字符串，如果是，则手动将value设置为Price。请注意，这将需要取消type="number"限制。

document.getElementsByTagName('input')[0].onkeydown = function() {
  if (this.value == '') {
    this.value = "Price ";
  }
}

<input class="textfield numberField font" name="Price" placeholder="Price">

如果您只想允许数字，则可以添加pattern这样的pattern="Price [0-9]"验证：

document.getElementsByTagName('input')[0].onkeydown = function() {
  if (this.value == '') {
    this.value = "Price ";
  }
}

<form>
  <input class="textfield numberField font" name="Price" placeholder="Price" pattern="Price [0-9]">
  <input type="submit">
</form>

请记住，两种方法在Price中都将带有value一词（这可能是不希望的）。创建<label>可能更适合您的情况。

Answer 3

您可以尝试以下方法：

Sub SummarySync()


  JanHousekeeping = 0
  FebHousekeeping = 0
  MarHousekeeping = 0
  AprHousekeeping = 0
  MayHousekeeping = 0
  JunHousekeeping = 0
  JulHousekeeping = 0
  AugHousekeeping = 0
  SepHousekeeping = 0
  OctHousekeeping = 0
  NovHousekeeping = 0
  DecHousekeeping = 0

  For i = 5 To 20
    For j = 5 To 20
      DateCheckLoop = Worksheets("Jan").Cells(i, 4)
      ObsCheck = Worksheets("Jan").Cells(j, 9).Value

       If Month(DateCheckLoop) = 1 And ObsCheck = "Housekeeping and Other Hazards" Then
          JanHousekeeping = JanHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 2 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          FebHousekeeping = FebHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 3 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          MarHousekeeping = MarHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 4 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          AprHousekeeping = AprHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 5 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          MayHousekeeping = MayHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 6 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          JunHousekeeping = JunHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 7 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          JulHousekeeping = JulHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 8 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          AugHousekeeping = AugHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 9 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          SepHousekeeping = SepHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 10 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          OctHousekeeping = OctHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 11 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          NovHousekeeping = NovHousekeeping + 1
       ElseIf Month(Worksheets("Jan").Cells(i, 4)) = 12 And Worksheets("Jan").Cells(j, 9).Value = "Housekeeping and Other Hazards" Then
          DecHousekeeping = DecHousekeeping + 1
       Else
       End If
     Next j
   Next i

   Sheets("Site Visit Summary").Range("DateJan").Offset(1, 0) = JanHousekeeping       
End Sub

.textfield.labeled>.label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 14px;
}

.textfield.labeled .label:first-child+input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: transparent;
}

.textfield.labeled>input {
    padding-left: 3px;
    border: 1px solid rgba(34,36,38,.15);
    box-shadow: none;
}

.textfield.labeled {
    display: inline-flex;
    color: rgba(0,0,0,.87);
}

.label {
    display: inline-block;
    background-color: #e8e8e8;
    padding: 2px 5px;
    color: rgba(0,0,0,.6);
    font-weight: bold;
}

键入时保留输入的占位符文本

3 个答案: