Question

当我使用JavaScript输入它时，我试图让某些东西起作用，我使用select元素值来确定要显示的输入。当我添加这些输入时，所有工作除了我创建的自定义日期之外。他们就是这个

<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date-bought" name="dateBought">

虽然这段代码单独工作，或者我只是在没有JavaScript的情况下插入它，但是当我必须使它看起来像这样时它会失败

<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")"="" onblur="(this.type=" text")"="" id="date-bought" name="dateBought">

唯一的区别是第二个'更改为"，但这似乎会导致一些问题。

＆＃13;

function typePicker() {
  var sel = document.getElementById("type");
  var typeInputs = document.getElementById("typeInputs");
  var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div><!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div>  <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control"  id="location" placeholder="Location"></div><!-- Location --></div>';
  var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
  var deskPhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div> <!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="extension" name="extension" placeholder="Extension"></div><!-- Extension -->';
  var desktops = '<div class="form-group"><input type="text" class="form-control" id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div> <!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="numDrive" name="numDrive" placeholder="Number of Drives"></div><!-- Number of Drives --><div class="form-group"><input type="number" class="form-control" id="sizeDrive name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div>  <br><br><!-- Stand Alone -->';
  var laptops = '<div class="form-group"><input type="text" class="form-control"  id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="typeDrive"name="typeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="user" name="user" placeholder="User"></div><!-- User --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div>  <br><br><!-- Stand Alone -->';
  var mobilePhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div><!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="os" name="os" placeholder="Operating System"></div><!-- OS --><div class="form-group"><input type="text" class="form-control" id="simNumber" name="simNumber" placeholder="SIM Number"></div><!-- SIM Number -->';
  var monitors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" nameid="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution --><div class="form-group"><input type="text" class="form-control" id="panelType" name="panelType" placeholder="Panel Type"></div><!-- Panel Type -->';
  var printers = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control"  id="location" name="location" placeholder="Location"></div><!-- Location -->                        ';
  var projectors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->';
  var routers = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="router-speed" onchange="speed()"><option selected>Select Router Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Router Speed --><div class="form-group" id="speed" name="speed"></div> <!-- Router Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->';
  var switches = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="switch-speed" onchange="speed()"><option selected>Select Switch Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Switch Speed --><div class="form-group" id="speed"></div> <!-- Switch Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="switch-ports" name="switch-ports" placeholder="Number of Ports" min="1"></div><!-- Number of Ports --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->';
  var tablets = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div>            <!-- Location --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->';
  // var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"></div>';
  var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"> </div> <input type="button" class="btn btn-primary add" id="add" value="Add Field"/>';
  var type = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Asset Type"></div>';

  if (sel.value == "aps") {
    typeInputs.innerHTML = aps;
  }

  if (sel.value == "cables") {
    typeInputs.innerHTML = cables;
  }

  if (sel.value == "deskPhones") {
    typeInputs.innerHTML = deskPhones;
  }

  if (sel.value == "desktops") {
    typeInputs.innerHTML = desktops;
  }

  if (sel.value == "laptops") {
    typeInputs.innerHTML = laptops;
  }

  if (sel.value == "mobilePhones") {
    typeInputs.innerHTML = mobilePhones;
  }

  if (sel.value == "monitors") {
    typeInputs.innerHTML = monitors;
  }

  if (sel.value == "printers") {
    typeInputs.innerHTML = printers;
  }

  if (sel.value == "projectors") {
    typeInputs.innerHTML = projectors;
  }

  if (sel.value == "routers") {
    typeInputs.innerHTML = routers;
  }

  if (sel.value == "switches") {
    typeInputs.innerHTML = switches;
  }

  if (sel.value == "tablets") {
    typeInputs.innerHTML = tablets;
  }

  if (sel.value == "other") {
    typeInputs.innerHTML = type + other;
  }


} // end typePicker


var warningType = document.getElementById("warningType");
var otherMessage = '<div class="alert alert-warning" role="alert">Limit of 5 custom fields for your plan!</div>';
var sel = document.getElementById("type");
var limit = 5;
var counter = 1;
$(document).on("click", ".add", function() {
  if (counter < limit) {
    if (sel.value != "other") {
      counter = 1;
    }
    counter++;
    if (counter == limit) {
      warningType.innerHTML = otherMessage;
    }
    var n = $(this).prev(".form-group").length + 1;
    var temp = $(this).prev(".form-group").clone();
    $('input:first', temp).attr('placeholder', 'Custom Field').val("");
    $(this).prev(".form-group").after(temp);
  }
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css">

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="type" class="control-label">Type</label>
  <select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
                                  <option value="aps">Access Point</option>
                                  <option value="cables">Cable</option>
                                  <option value="desktops">Desktop</option>
                                  <option value="laptops">Laptop</option>
                                  <option value="deskPhones">Desk Phone</option>
                                  <option value="mobilePhones">Mobile Phone</option>
                                  <option value="monitors">Monitor</option>
                                  <option value="printers">Printer</option>
                                  <option value="projectors">Projector</option>
                                  <option value="routers">Router</option>
                                  <option value="switches">Switch</option>
                                  <option value="tablets">Tablet</option>
                                  <option value="other">Other</option>
                                </select>
</div>

<div class="form-group" id="typeInputs">

</div>

<div class="form-gorup" id="warningType">

</div>

＆＃13;

我的问题是上面的代码（非常顶级的代码）可以正常工作，而下面的代码和代码段中的代码不起作用。它应该从文本输入更改为焦点/选择上的日期。这是为了保持外观干净。我真的不想以string格式接受日期。当我使用JavaScript插入时，如何将其显示为text并将焦点转到date输入类型？

当我点击日期字段时，代码段似乎标记了一个错误，console.log在第2行的新文件中显示了一个意外}我在我认为正在调用的任何文件上找不到任何第2行错误。没有其他console.log错误。 chrome中没有脚本调用错误。

在引号中包装var值（使用JS插入）但自定义日期输入不起作用

0 个答案: