简单搓了一个HTML转换大小的页面（bug修好了）

Administrator
2024-03-18
感谢开发部同事帮忙修正！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本大小写转换与空格计数器</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        padding: 0;
    }
    textarea {
        margin-bottom: 10px;
    }
    button {
        margin-left: 5px;
        padding: 5px 10px;
        cursor: pointer;
    }
    #message {
        margin-top: 10px;
        color: #f00;
    }
	 /* 初始时隐藏第二个按钮 */
    .hide {
        display: none;
    }
</style>
</head>
<body>

<h1>文本大小写转换与空格计数器</h1>

<div>
    <textarea id="inputText" placeholder="在这里输入你的文本..." rows="4" cols="50"></textarea>
</div>

<div>
    <button id="showButton" onclick="convertText()">转为大写</button>
    <button id="hideButton" onclick="removeSpaces()" class="hide">去除空格</button>
</div>

<div id="output">
    <p>输出结果：</p>
    <textarea id="uppercaseText" readonly rows="4" cols="50"></textarea>
    <p>空格数量：<span id="spaceCount"></span></p>
    <button onclick="copyText()">复制结果</button>
    <p id="message"></p>
</div>

<script>
		// 获取两个按钮元素
        var showButton = document.getElementById('showButton');
        var hideButton = document.getElementById('hideButton');

        // 为第一个按钮添加点击事件监听器
        showButton.addEventListener('click', function() {
            // 显示第二个按钮
            hideButton.style.display = 'inline';
        });
		
        // 为第二个按钮添加点击事件监听器
        //hideButton.addEventListener('click', function() {
            // 隐藏第二个按钮
        //    hideButton.style.display = 'none';
        //});
function convertText() {
    var inputText = document.getElementById('inputText').value;
    var uppercaseText = inputText.toUpperCase();
    var spaceCount = (inputText.match(/\s/g) || []).length;
    document.getElementById('uppercaseText').value = uppercaseText;
    document.getElementById('spaceCount').textContent = spaceCount;
    document.getElementById('message').textContent = '';
}

function removeSpaces() {
    var inputText = document.getElementById('uppercaseText').value;
    var noSpacesText = inputText.replaceAll(' ', '');
    document.getElementById('uppercaseText').value = noSpacesText;
    document.getElementById('spaceCount').textContent = '0';
    document.getElementById('message').textContent = '所有空格已被去除。';
}

function copyText() {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(document.getElementById('uppercaseText').value).then(function() {
            document.getElementById('message').textContent = '文本已复制到剪贴板！';
        }, function(error) {
            document.getElementById('message').textContent = '无法复制文本: ' + error;
        });
    } else {
        var copyText = document.createElement('textarea');
        copyText.value = document.getElementById('uppercaseText').value;
        document.body.appendChild(copyText);
        copyText.select();
        document.execCommand('copy');
        document.body.removeChild(copyText);
        document.getElementById('message').textContent = '文本已复制到剪贴板！';
    }
}
</script>

</body>
</html>