Я динамически создаю поля раскрытия начального и конечного времени. У меня есть еще одна ссылка для удаления файлов также в моем приложении. Но когда я использую клавишу «Tab», я также вижу выпадающий список в кнопке удаления. Как я должен избежать падения в моей кнопке удаления. Как мне избавиться от выпадающего списка выбора времени в моей кнопке удаления
мой сценарий
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div> <input class="btn btn-link" onclick="addtextbox()" type="button" value="Add"> </div> <div id="ToolsGroup"> </div> </div> <script> var count = 0; function addtextbox() { var newTextBoxDiv = document.createElement('div'); newTextBoxDiv.id = 'Tools'; document.getElementById("ToolsGroup").appendChild(newTextBoxDiv); newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group"><label class="col-md-4 control-label" for="starttime">Start time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dstarttime' + count + '" placeholder="starttime" required> </div></div>' + '<div class="form-group"><label class="col-md-4 control-label" for="endtime">End time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dendtime' + count + '" placeholder="endtime"></div></div>' + '<input type="button" value="Remove" class="reomvetools" onclick="removeTextArea(this);"></div><div id="dresultDiv' + count + '"></div></form>' count++; $('#Tools input').timepicker({ timeFormat: 'HH:mm', interval: 30, use24hours: true, scrollbar: true, }); }; function removeTextArea(inputElement) { var el = inputElement; while (el.tagName != 'DIV') el = el.parentElement; el.parentElement.removeChild(el); counter--; } </script> </body> </html>
Вместо ("#tools input"). Timepicker, я попытался дать ("#form -group"). timpicker, это не работает. Я попытался изменить класс кнопки удаления на «btn btn-link». Это не сработало. как мне это сделать? Если я использую мышь, я не вижу раскрывающегося списка времени в кнопке «удалить». Если я использую вкладку, я вижу раскрывающийся список. Может кто-нибудь помочь мне избавиться от выпадающего в кнопке удаления?
Просто определите для типа ввода значение времени, и вы хороши для go
$('#Tools input[type=time]').timepicker({ timeFormat: 'HH:mm', interval: 30, use24hours: true, scrollbar: true, });