javascript - 当用户在搜索栏上键入时，如何显示/隐藏 textarea 值？
问题描述
对不起，我的英语不是我的母语。我正在创建一个供个人使用的工具。这是一个图像路径生成器工具。它用于为上传的图像文件名生成新路径。
该工具需要2个用户输入：
（1）上传图片文件（可以多个）
（2）输入图片的新路径
上传和生成图像后，输出将显示在 2 个文本区域内。一个 textarea 显示图像的新路径 + 文件名，而第二个 textarea 仅显示图像的文件名。
我已经创建了一个搜索栏功能，它可以在用户输入时工作，但问题是，当用户没有在搜索栏中输入任何内容时，如何恢复原始 textarea 值？
注意：我只在New Path + Image Filename(s) textarea 部分创建了一个搜索功能。
代码：
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function()
{
// THIS IS THE SEARCH BAR FUNCTION
$('#searchDir').keyup(function()
{
var val = $(this).val();
var lines1 = $('#outputText').val();
lines1 = lines1.split(/\n/);
var originalDirect = [];
for(var o=0; o < lines1.length; o++)
{
// var text0 = lines1[o];
originalDirect.push((lines1[o]));
console.log(originalDirect);
}
if(val != null)
{
// $(lines1).hide();
var searchDirect = [];
for (var a=0; a < lines1.length; a++)
{
var text = lines1[a];
if(text.indexOf(val) != -1)
{
// $(this).show();
searchDirect.push((lines1[a]));
}
}
$('#outputText').val(searchDirect.join('\n'));
// $(lines1).each(function()
// {
// var text = $(this).text().toLowerCase();
// if(text.indexOf(val) != -1)
// {
// $(this).show();
// }
// });
}
else if(val == null)
{
$('#outputText').val(originalDirect.join('\n'));
}
});
$('.output1').hover(function(){
$('.copy-btn1').addClass('copy-btn-show');
}, function(){
$('.copy-btn1').removeClass('copy-btn-show');
});
$('.output2').hover(function(){
$('.copy-btn2').addClass('copy-btn-show');
}, function(){
$('.copy-btn2').removeClass('copy-btn-show');
});
$('.copy-btn1').click(function()
{
$('.copy-btn1').attr('data-content', 'Copied to clipboard!')
$('.copy-btn1').popover('show');
var copyText = $('#outputText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn1').popover('hide') }, 1000);
});
$('.copy-btn2').click(function()
{
$('.copy-btn2').attr('data-content', 'Copied to clipboard!')
$('.copy-btn2').popover('show');
var copyText = $('#filenameText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn2').popover('hide') }, 1000);
});
});
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
// var p = document.createElement("p");
// p.innerHTML = addtext + input.files[i].name;
outputData.push((addtext + input.files[i].name));
fileNames.push((input.files[i].name));
countSrc++;
// ul.appendChild(p);
}
if(!ul.hasChildNodes()) {
// var p = document.createElement("p");
// p.innerHTML = 'No Files Selected';
// ul.appendChild(p);
}
$('#outputText').val(outputData.join('\n'));
$('#filenameText').val(fileNames.join('\n'));
$('.numbSrc').html(countSrc);
}
function countImages(changeBGColor)
{
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
// $('#countImg').html(input.files.length + " Images");
if (input.files.length == 0)
{
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else if (input.files.length == 1)
{
$('#labelUpload').html(input.files.length + " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else
{
$('#labelUpload').html(input.files.length + " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}
</script>body
{
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
color:#20629F!important;
background-color:rgba(204, 230, 255, 0.76) !important;
/* color:#20629F!important;*/
/* color:white!important;*/
/* background-color:rgb(204, 230, 255, 0.07) !important;*/
/* background: rgb(242,242,242);
background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(9,71,121,0.6587009803921569) 0%, rgba(102,231,235,0.7763480392156863) 100%);*/
}
h1, h2, h3, h4, h5, h6
{
font-weight: 600;
}
h4
{
/* color:#061420!important;*/
/* color:white!important;*/
color:#093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav
{
position: fixed;
z-index:6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle
{
position: absolute;
z-index:-1;
right:-0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width:50%;
}
#howToContainer .howToTitle span
{
display: inline-block;
vertical-align: middle;
float:right;
color:#2675BF;
}
#howToContainer .howToTitle span img
{
width:40px;
height:40px;
margin-left:1em;
background-color:#2675BF;
border-radius:0px 10px 10px 0;
}
#howToContainer:hover .howToTitle{
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span
{
color:white;
font-weight: bold;
}
#howToContainer .howToText
{
border: 1px solid rgba(51, 156, 255);
border-radius:10px;
background-color: white;
width:600px;
padding:1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li
{
font-size: 14px;
color:#20629F!important;
}
#howToContainer:hover .howToText
{
color:#061420!important;
font-weight: 400;
border:1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput
{
text-indent:8px;
font-size:14px !important;
/* color:#0C253C!important;*/
color:#20629F!important;
font-weight: 400;
height:100%;
}
.directoryInput::placeholder
{
font-style:italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus
{
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border:none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder
{
color:rgba(38, 117, 191, 0.65);
font-size:13px;
}
.fa-search
{
color:#2D89DF;
position: absolute;
float:right;
right:1em;
top:0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1, .copy-btn2
{
border:1px solid rgb(38, 117, 191);
padding:7px 30px;
margin-right:6px;
border-radius:7px 7px 0px 0px;
border-bottom:none;
transform: translate3d(0, 28px, -1px);
color:#2D89DF !important;
transition:all .3s;
z-index: -1;
}
.copy-btn-show{
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border:1px solid #2D89DF;
border-bottom:none;
/*background-color:#2D89DF;*/
color:#2D89DF !important;
z-index: -1;
cursor:pointer;
user-select: none;
font-weight:800;
}
.copy-btn-show:hover
{
background-color:#2D89DF;
color:white !important;
}
/*END OF Copy Button*/
#genButton
{
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color:#2D89DF;
padding:0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color:white!important;
font-weight: bold;
font-size:15px;
}
#genButton:hover
{
/* border: 1px solid rgb(19, 59, 96);*/
background-color:rgb(19, 59, 96);
color:white!important;
}
.inputTA
{
display:inline-block;
margin:3px 20px 0 20px;
}
.inputTA2
{
display:inline-block;
margin:3px 20px 0 20px;
}
.outputTAstyle, .outputTAstyle2{
border: 1px solid rgba(51, 156, 255);
border-radius:5px;
width:800px;
height:500px;
font-size:13px !important;
color:#0C253C!important;
margin:0 0;
outline:none;
padding:15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}
.outputTAstyle:focus , .outputTAstyle2:focus{
/*box-shadow: 0px 0px 2px 0px #ffffff;
border-color:white;*/
cursor:default!important;
/*color:#061420!important;*/
/*border:1px solid white;*/
color:#061420!important;
font-weight: 400;
/*border-color: #2D89DF;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*font-weight: 500;*/
/*border-color: #2D89DF;*/
/*box-shadow: 0px 0px 10px 0px white;*/
}
/* .outputTAstyle2[readonly]
{
background-color:rgb(229, 243, 255) !important;
}*/
::placeholder{
color:rgba(38, 117, 191, 0.65);
font-size:15px;
}
::-webkit-scrollbar {
display: none;
}
/*
.footer
{
color:#0D2740 !important;
font-weight: 600;
}*/<!-- Programmed by Christine Jane Kudera ¯\_( ͡❛ ͜ʖ͡❛ )_/¯ -->
<html>
<head>
<title>Image Path Generator</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- for the material icons -->
</head>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded: <span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div> <!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/"/>
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong> | e.g. |</strong> images/newImg/2020/08/</small>
</div> <!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path + Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path + Image Filename(s) here..." readonly></textarea>
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>
</body>
</html>解决方案
解决这个问题的一种方法是全局声明变量，以便它可以在整个代码中使用。在下面的代码中，我已经全局声明了两个变量，即：original_datas&original_filenames来存储文件路径和文件名的值。
每当用户上传文件时，我们可以将outputData具有整个文件列表的值分配给这些全局变量，如果输入框的值为空，我们可以使用这些全局变量来分配valuetextarea。您可以对其他用于搜索文件名的输入框执行相同的操作。
演示代码：
$('#searchDir').keyup(function() {
var lines1;
var val = $(this).val();
lines1 = $('#outputText').val();
lines1 = lines1.split(/\n/);
var originalDirect = [];
//check if value is not null
if ((val != null) && (val != '')) {
for (var o = 0; o < lines1.length; o++) {
originalDirect.push((lines1[o]));
}
var searchDirect = [];
for (var a = 0; a < lines1.length; a++) {
var text = lines1[a];
if (text.indexOf(val) != -1) {
// $(this).show();
searchDirect.push((lines1[a]));
}
}
$('#outputText').val(searchDirect.join('\n'));
} else if (val == '') {
console.log("value is null")
$('#outputText').val(original_datas);//add value to textarea
}
});
//declare this globally
var original_datas; //for path+image search
var original_filenames;//for file search
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
outputData.push((addtext + input.files[i].name));
fileNames.push((input.files[i].name));
countSrc++;
}
if (!ul.hasChildNodes()) {
}
//assign values to use later
original_datas = outputData.join('\n');
original_filenames = fileNames.join('\n');
$('#outputText').val(outputData.join('\n'));
$('#filenameText').val(fileNames.join('\n'));
$('.numbSrc').html(countSrc);
}
function countImages(changeBGColor) {
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
if (input.files.length == 0) {
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
} else if (input.files.length == 1) {
$('#labelUpload').html(input.files.length + " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
} else {
$('#labelUpload').html(input.files.length + " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: #20629F!important;
background-color: rgba(204, 230, 255, 0.76) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
h4 {
/* color:#061420!important;*/
/* color:white!important;*/
color: #093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav {
position: fixed;
z-index: 6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle {
position: absolute;
z-index: -1;
right: -0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width: 50%;
}
#howToContainer .howToTitle span {
display: inline-block;
vertical-align: middle;
float: right;
color: #2675BF;
}
#howToContainer .howToTitle span img {
width: 40px;
height: 40px;
margin-left: 1em;
background-color: #2675BF;
border-radius: 0px 10px 10px 0;
}
#howToContainer:hover .howToTitle {
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span {
color: white;
font-weight: bold;
}
#howToContainer .howToText {
border: 1px solid rgba(51, 156, 255);
border-radius: 10px;
background-color: white;
width: 600px;
padding: 1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li {
font-size: 14px;
color: #20629F!important;
}
#howToContainer:hover .howToText {
color: #061420!important;
font-weight: 400;
border: 1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput {
text-indent: 8px;
font-size: 14px !important;
/* color:#0C253C!important;*/
color: #20629F!important;
font-weight: 400;
height: 100%;
}
.directoryInput::placeholder {
font-style: italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus {
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border: none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder {
color: rgba(38, 117, 191, 0.65);
font-size: 13px;
}
.fa-search {
color: #2D89DF;
position: absolute;
float: right;
right: 1em;
top: 0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1,
.copy-btn2 {
border: 1px solid rgb(38, 117, 191);
padding: 7px 30px;
margin-right: 6px;
border-radius: 7px 7px 0px 0px;
border-bottom: none;
transform: translate3d(0, 28px, -1px);
color: #2D89DF !important;
transition: all .3s;
z-index: -1;
}
.copy-btn-show {
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border: 1px solid #2D89DF;
border-bottom: none;
/*background-color:#2D89DF;*/
color: #2D89DF !important;
z-index: -1;
cursor: pointer;
user-select: none;
font-weight: 800;
}
.copy-btn-show:hover {
background-color: #2D89DF;
color: white !important;
}
/*END OF Copy Button*/
#genButton {
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color: #2D89DF;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color: white!important;
font-weight: bold;
font-size: 15px;
}
#genButton:hover {
/* border: 1px solid rgb(19, 59, 96);*/
background-color: rgb(19, 59, 96);
color: white!important;
}
.inputTA {
display: inline-block;
margin: 3px 20px 0 20px;
}
.inputTA2 {
display: inline-block;
margin: 3px 20px 0 20px;
}
.outputTAstyle,
.outputTAstyle2 {
border: 1px solid rgba(51, 156, 255);
border-radius: 5px;
width: 800px;
height: 500px;
font-size: 13px !important;
color: #0C253C!important;
margin: 0 0;
outline: none;
padding: 15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded: <span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div>
<!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/" />
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong> | e.g. |</strong> images/newImg/2020/08/</small>
</div>
<!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path + Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class="copy-holder">
<span class="float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path + Image Filename(s) here..." readonly></textarea>
<!--<div class="outputTAstyle" id="outputText" contenteditable="true" spellcheck="false" autocomplete="off" placeholder="New Path + Image Filename(s) here..." readonly></div>-->
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class="copy-holder">
<span class="float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>推荐阅读
- python - 与 tensorflow 一起导入时出现 Numpy 错误
- pandas - 传递参数时重命名轴错误的 Pandas 错误
- sql-server - 如何安排在 SQL Server 上运行 SQL 脚本？
- c++ - 使用 FreeType 加载彩色字体
- javascript - 在新选项卡中呈现静态内容（express、ejs）
- sql-server - SSIS 包工作，但创建表时作业失败
- c# - .NET MVC 控制器 void 操作在 Chrome 中返回空文件，而不是在 Firefox 中
- mongodb - 除以零会在 mongodb 聚合上产生错误
- scala - Scala - 方法 X 什么都不覆盖
- node.js - 节点 Elasticsearch 批量索引静默失败