HTML输入框Placeholder内容锁定及解锁代码示例

本文提供了一个简单的JavaScript代码示例，实现HTML输入框placeholder内容锁定，并提供解锁功能。使用localStorage保存输入框的值和锁定状态，方便用户刷新浏览器后依然保留输入内容。

HTML代码：

<input id='edit_openaikey' placeholder='sk-xxxxxxxxxxxxxxxxxx'>
<button id='unlock'>解除锁定</button>

JavaScript代码：

// 获取输入框和解锁按钮
var input = document.getElementById('edit_openaikey');
var unlockBtn = document.getElementById('unlock');

// 检查localStorage中是否已经保存了值
var savedValue = localStorage.getItem('inputValue');
if (savedValue) {
  input.value = savedValue;
}

// 检查localStorage中是否已经解除了锁定
var isUnlocked = localStorage.getItem('isUnlocked');
if (isUnlocked) {
  unlockBtn.style.display = 'none';
}

// 绑定解锁按钮的点击事件
unlockBtn.addEventListener('click', function() {
  localStorage.setItem('isUnlocked', true);
  unlockBtn.style.display = 'none';
  input.placeholder = '';
});

// 绑定输入框的change事件，保存值到localStorage
input.addEventListener('change', function() {
  localStorage.setItem('inputValue', input.value);
});

代码解释：

首先获取输入框和解锁按钮的DOM元素。
检查localStorage中是否已经保存了输入框的值，如果有则将其设置为输入框的值。
检查localStorage中是否已经解除了锁定，如果已经解除了则隐藏解锁按钮，并将输入框的placeholder清空。
绑定解锁按钮的点击事件，将一个标志位保存到localStorage中，表示已经解除了锁定，隐藏解锁按钮，并将输入框的placeholder清空。
绑定输入框的change事件，每次输入框的值发生变化时保存到localStorage中。

注意：

这个实现并不是绝对安全的，因为localStorage中的数据可以被其他网站的脚本访问。如果您需要更高的安全性，请考虑使用加密算法来保存敏感信息。