【发布时间】：2020-12-04 21:06:56
【问题描述】：
对不起，我的英语不是我的母语。我正在创建一个供个人使用的工具。这是一个图像路径生成器工具。它用于为上传的图像文件名生成新路径。
此工具需要 2 个用户输入：
(1) 上传图片文件（可以多个）
(2) 输入图片的新路径
上传并生成图像后，输出将显示在 2 个文本区域内。 一个文本区域显示图像的新路径+文件名，而第二个文本区域仅显示图像的文件名。
我已经创建了一个搜索栏功能，它可以在用户输入时工作，但问题是，当用户没有在搜索栏中输入任何内容时，我怎样才能恢复原始 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>【问题讨论】：
标签： javascript html jquery search textarea