从textarea JS函数中删除尾随字母
Removing trailing letter from textarea JS Function
我使用 Yandex API 创建了一个 SPA 翻译应用程序。我刚刚完成了我的应用程序的逻辑和功能,但是当用户从输入文本区域中删除所有文本时,我仍然不知道如何删除输出文本区域中的尾随字母。
如何编写一个函数来在用户删除所有输入文本后将输出文本区域清除回 ('') 空白字符串。 link 到我的现场网站在这里 (https://translex-app-shanemuir.c9users.io/dist/index.html)。
这里我有一个HTML表格:
<div class="container myForm text-center">
<div class="row row-center">
<div class="col-sm-12">
<form class="form-inline well justify-content-center">
<textarea id="inputText" class="form-control" placeholder="Enter a Word..."></textarea>
<select class="form-control" id="selectLang">
<option selected>Choose Language...</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="translation-header">Translation</h2>
<form class="form-inline well justify-content-center">
<textarea readonly class="form-control" placeholder="Translation" id="translation"></textarea>
</form>
</div>
</div>
</div>
这里我有一些 JS:
let searchInput = document.querySelector('#inputText');
let select = document.querySelector('#selectLang');
let textArea = document.querySelector('#translation');
let selectedLang = 'es';
function getLanguages(){
axios.get('https://translate.yandex.net/api/v1.5/tr.json/getLangs?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&ui=en')
.then((response) => {
let languages = response.data.langs;
let languageCode = {
name:'',
code:''
};
for(language in languages) {
languageCode.name = languages[language];
languageCode.code = language;
let option = document.createElement('option');
option.innerHTML = languageCode.name;
option.value = languageCode.code;
select.appendChild(option);
}
})
.catch((err) => {
console.log(err);
});
}
function translateText(textArg){
let searchText;
if(textArg == ''){
searchText = document.querySelector('#inputText').value;
}
else{
searchText = textArg;
}
if(searchText != ''){
axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&lang=' + selectedLang + '&text=' + searchText)
.then((response) => {
let translateInput = document.querySelector('#translation');
translateInput.value = response.data.text[0];
})
.catch((err) => {
console.log(err);
});
}
}
searchInput.addEventListener('keyup',() => {
translateText('');
});
select.addEventListener('change',() => {
selectedLang = select.options[select.selectedIndex].value;
translateText('');
});
getLanguages();
向 if
添加 else
子句以清空文本区域。
if(searchText != ''){
axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&lang=' + selectedLang + '&text=' + searchText)
.then((response) => {
let translateInput = document.querySelector('#translation');
translateInput.value = response.data.text[0];
})
.catch((err) => {
console.log(err);
});
} else {
document.querySelector('#translation').value = '';
}
我使用 Yandex API 创建了一个 SPA 翻译应用程序。我刚刚完成了我的应用程序的逻辑和功能,但是当用户从输入文本区域中删除所有文本时,我仍然不知道如何删除输出文本区域中的尾随字母。
如何编写一个函数来在用户删除所有输入文本后将输出文本区域清除回 ('') 空白字符串。 link 到我的现场网站在这里 (https://translex-app-shanemuir.c9users.io/dist/index.html)。
这里我有一个HTML表格:
<div class="container myForm text-center">
<div class="row row-center">
<div class="col-sm-12">
<form class="form-inline well justify-content-center">
<textarea id="inputText" class="form-control" placeholder="Enter a Word..."></textarea>
<select class="form-control" id="selectLang">
<option selected>Choose Language...</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="translation-header">Translation</h2>
<form class="form-inline well justify-content-center">
<textarea readonly class="form-control" placeholder="Translation" id="translation"></textarea>
</form>
</div>
</div>
</div>
这里我有一些 JS:
let searchInput = document.querySelector('#inputText');
let select = document.querySelector('#selectLang');
let textArea = document.querySelector('#translation');
let selectedLang = 'es';
function getLanguages(){
axios.get('https://translate.yandex.net/api/v1.5/tr.json/getLangs?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&ui=en')
.then((response) => {
let languages = response.data.langs;
let languageCode = {
name:'',
code:''
};
for(language in languages) {
languageCode.name = languages[language];
languageCode.code = language;
let option = document.createElement('option');
option.innerHTML = languageCode.name;
option.value = languageCode.code;
select.appendChild(option);
}
})
.catch((err) => {
console.log(err);
});
}
function translateText(textArg){
let searchText;
if(textArg == ''){
searchText = document.querySelector('#inputText').value;
}
else{
searchText = textArg;
}
if(searchText != ''){
axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&lang=' + selectedLang + '&text=' + searchText)
.then((response) => {
let translateInput = document.querySelector('#translation');
translateInput.value = response.data.text[0];
})
.catch((err) => {
console.log(err);
});
}
}
searchInput.addEventListener('keyup',() => {
translateText('');
});
select.addEventListener('change',() => {
selectedLang = select.options[select.selectedIndex].value;
translateText('');
});
getLanguages();
向 if
添加 else
子句以清空文本区域。
if(searchText != ''){
axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180914T205319Z.b0ffef87e97badd3.e78787ec8a392b9772f8b8f56933b1d86463d330&lang=' + selectedLang + '&text=' + searchText)
.then((response) => {
let translateInput = document.querySelector('#translation');
translateInput.value = response.data.text[0];
})
.catch((err) => {
console.log(err);
});
} else {
document.querySelector('#translation').value = '';
}