如何 enable/disable 基于特定输入值的按钮？

Question

我有一个简单的应用程序，它有一个输入 (URL) 和一个按钮。

按钮有一些 JavaScript 接受 URL 并用新域替换域。

基本上，用户输入“www.old.company.com/products”，应用 returns “www.new.company.com/products”.

该程序可以运行，但现在我正在努力使该按钮处于禁用状态，直到输入具有特定域。我尝试向按钮添加 disabled 属性，但我不知道如何根据输入值删除该属性。

例如：

www.old.company.com/products > 启用按钮
www.old.company.com/about-us > 按钮已启用
www.companyX.com/products > 按钮已禁用
www.google.com > 按钮已禁用
空白 > 按钮已禁用

function replace() {
  var a = document.getElementById('input').value;
  var b = a.replace(/old.company.com/g, "new.company.com");
  document.getElementById('output').innerHTML = b;
}

button {
  background-color: #003359;
  min-width: 150px;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0px 20px 20px 0px;
  border-radius: 2px;
}

button:disabled {
  background-color: #f5f5f5;
  min-width: 150px;
  border: none;
  color: #9A9A9A;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0px 20px 20px 0px;
  border-radius: 2px;
}

<div>
  <input id="input" style="width: 30%; margin: 20px;" type="text" placeholder="https://old.company.com/..." pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?old+([\-\.]company+)\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$" />
  <button onclick="replace()" class="button">Create</button>
  <p id="output">&nbsp;</p>
</div>

https://jsfiddle.net/ianjmonk/637quxLn/9/

Answer 1

也许你可以在 input.

上使用 "onchange" 属性

每次更新元素时它都会给你输入的值

https://www.w3schools.com/jsref/event_onchange.asp

HTML

<input onchange="handleChange(this" />

JS => 你会得到一个字符串

const button = document.getElementById('myButton')

function handleChange(event){
 let inputValue = event.value;
 console.log(inputValue)


}

现在你必须比较 inputValue

如果输入值不等于您的域 => button.setAttribute('disabled','') // Means that we add the disabled attribute to the button

如果您的域名没问题 那么=> button.removeAttribute('disabled')

在您的代码中：

Answer 2

new URL("https://www.old.company.com/products").hostname === 'www.old.company.com'

function handleChange(event){
 const urlInput = event.target.value.startswith('https://') ? 
 event.target.value : `https://${event.target.value}`;

 if(new URL(urlInput).hostname === 'www.old.company.com')
   return document.querySelector('.button').disabled = false;
 return document.querySelector('.button').disabled = true;
}

Answer 3

if(value.includes('your string')) {
    buttonElement.disabled = true
} else {
    buttonElement.disabled = false
}

如果您在 onChange 事件中使用此模式，它将始终根据值进行更新

const buttonElement = document.querySelector('button')
const inputElement = document.querySelector('input')

inputElement.addEventListener('change', (e) => {
    if(e.target.value.includes('old.company.com')){
        buttonElement.disabled = false
    } else {
        buttonElement.disabled = true
    }
}

这就是我验证表单字段的方式，如果它不太复杂的话，你也可以使用正则表达式匹配这个模式。

如何 enable/disable 基于特定输入值的按钮？

How do I enable/disable a button based on a specific input value?

html

javascript

input

button