HTML彈出可編輯文本框代碼
在Web開發中，彈出式可編輯文本框是非常常見的技術，它能夠使用戶很方便地進行編輯并保存數據。下面是一個使用HTML語言的彈出式可編輯文本框代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>彈出式可編輯文本框</title>
<style type="text/css">
.popup-edit {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
background-color: #fff;
z-index: 9999;
border-radius: 5px;
width: 300px;
height: 100px;
}
.popup-edit textarea {
width: 290px;
height: 70px;
margin: 5px;
}
.popup-edit button {
margin: 5px;
float: right;
}
</style>
<script type="text/javascript">
function show_edit_box(textbox_id) {
var textbox = document.getElementById(textbox_id);
var popup = document.createElement('div');
popup.className = 'popup-edit';
var textarea = document.createElement('textarea');
textarea.value = textbox.value;
popup.appendChild(textarea);
var save_button = document.createElement('button');
save_button.innerHTML = '保存';
save_button.onclick = function() {
textbox.value = textarea.value;
popup.parentNode.removeChild(popup);
};
popup.appendChild(save_button);
var cancel_button = document.createElement('button');
cancel_button.innerHTML = '取消';
cancel_button.onclick = function() {
popup.parentNode.removeChild(popup);
};
popup.appendChild(cancel_button);
document.body.appendChild(popup);
textarea.focus();
}
</script>
</head>
<body>
<p>
輸入姓名: <input type="text" id="input_name">
<button onclick="show_edit_box('input_name')">編輯</button>
</p>
<br/>
<p>
輸入年齡: <input type="text" id="input_age">
<button onclick="show_edit_box('input_age')">編輯</button>
</p>
</body>
</html>以上就是使用HTML語言實現彈出式可編輯文本框的代碼示例。具體來說，我們可以發現以下的重點：
- 在 CSS 中定義一個類 .popup-edit，用于控制彈出框的樣式，包括位置、邊框、背景色等。
- 在 HTML 中使用一個普通的輸入框，并在其旁邊加上一個按鈕，點擊該按鈕就會彈出可編輯文本框。
- 在 JavaScript 中編寫了一個名為 show_edit_box 的函數，該函數會創建一個彈出框，并在其中加入一個文本框、一個保存按鈕和一個取消按鈕。同時，它還把彈出框添加到 body 元素中進行展示。最后，當用戶保存或者取消時，它會更新輸入框的內容，并將彈出框從 body 元素中移除。
總之，通過使用以上示例代碼，我們可以很方便地實現彈出式可編輯文本框的功能。下一篇mysql創建唯一約束