文本域计数器

计数器

一个用jQuery实现的在textarea中输入内容，实现显示输入多少行，回车就算一行,删除一行减一，加一个清除按钮。

html部分

<textarea id="textareaItem"></textarea>
<div id="count">
<button id="clearBtn">clear</button>

js部分

// 计数器函数
function counter(textarea, whiteLineCount, clearButton) {
	// 第一个参数：textarea的id，第二个参数，要写入位置的id，第三个参数，清空按钮的id
    var lineCount = 0
    textarea.on('input', function () {
        var text = $(this).val()
        var newLineCount = text.split('\n').length

        if (text.trim() === '') {
            lineCount = 0
        } else {
            lineCount = newLineCount
        }

        whiteLineCount.text(lineCount) // 更新行数计数显示
    })

    textarea.on('keydown', function (event) {
        if (event.keyCode === 13) {
            // 回车键按下时，行数加一
            lineCount++
            whiteLineCount.text(lineCount) // 更新行数计数显示
        }
    })

    textarea.on('keyup', function (event) {
        if (event.keyCode === 8) {
            // 删除键按下时，行数减一
            var text = $(this).val()
            var newLineCount = text.split('\n').length
            if (newLineCount < lineCount) {
                lineCount = newLineCount
                if (lineCount < 0) {
                    lineCount = 0
                }
                whiteLineCount.text(lineCount) // 更新行数计数显示
            }
        }
    })

    clearButton.on('click', function () {
        // 清空textarea和计数
        textarea.val('')
        lineCount = 0
        whiteLineCount.text(lineCount)
    })
}
// 调用
counter($('#textareaItem',$('#count'),$('#clearBtn')