GeneratePress 댓글입력 설정

댓글에서 이름과 댓글 내용을 입력해야 제출 버튼 활성화하기

CSS
/* Style for disabled submit button */
#submit:disabled {
    background-color: gray;
    color: white;
    cursor: not-allowed;
}
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function () {
    const authorInput = document.getElementById('author');
    const commentInput = document.getElementById('comment');
    const submitButton = document.getElementById('submit');

    function updateButtonState() {
        if (authorInput.value.trim() !== '' && commentInput.value.trim() !== '') {
            submitButton.disabled = false;
        } else {
            submitButton.disabled = true;
        }
    }

    // Initial check
    updateButtonState();

    // Event listeners for input fields
    authorInput.addEventListener('input', updateButtonState);
    commentInput.addEventListener('input', updateButtonState);
});
</script>

댓글에 HTML 태크가 입력시 오류 메세지 표기

JavaScript
<script>
window.addEventListener("DOMContentLoaded", function() { 
    // Find the textarea, author input, and submit button
    const textarea = document.querySelector('textarea[name="comment"][cols="45"][rows="8"]');
    const authorInput = document.getElementById('author');
    const submitButton = document.getElementById('submit');

    // Function to update the state of the submit button
    function updateSubmitButtonState() {
        const isAuthorNotEmpty = authorInput.value.trim() !== '';
        const isTextareaNotEmpty = textarea.value.trim() !== '';
        const hasHTMLTags = /<\/?[a-z][\s\S]*?>/i.test(textarea.value);

        submitButton.disabled = !(isAuthorNotEmpty && isTextareaNotEmpty) || hasHTMLTags;
    }

    if (textarea) {
        // Existing event listeners for the textarea
        textarea.addEventListener("input", handleTextareaInput);
        textarea.addEventListener("change", handleTextareaInput); // Added for mobile devices
    }

    if (authorInput) {
        // Event listener for author input field
        authorInput.addEventListener('input', updateSubmitButtonState);
        authorInput.addEventListener('change', updateSubmitButtonState); // Added for mobile devices
    }

    // Function to handle input and change events for textarea
    function handleTextareaInput() {
        const content = this.value;
        const hasHTMLTags = /<\/?[a-z][\s\S]*?>/i.test(content);
        let warning = document.getElementById("htmlTagWarning");

        if (hasHTMLTags) {
            if (!warning) {
                warning = document.createElement('span');
                warning.id = "htmlTagWarning";
                warning.className = "comments-warning";
                warning.innerHTML = 'Warning! HTML 태그 입력이 허용되지 않습니다. <a href="https://www.thewordcracker.com/lt-gt-converter/" target="_blank">여기</a>에서 부등호 기호를 변환하여 입력해주세요.';
                this.after(warning);
            }
        } else if (warning) {
            warning.remove();
        }

        updateSubmitButtonState();
    }

    // Initial check to update submit button state
    updateSubmitButtonState();
});
</script>

Leave a Comment