web前端之根据字符串长度从长到短排序、中文字符串优先、样式循环、禁止冒泡、悬浮、激活、禁用、点击、切割、替换、stopPropagation、textarea、replace、split、sort

MENU

• 前言
• 效果图
• html
• style
• JavaScript

前言

1、代码段由HTML、CSS(使用Sass语法)和JavaScript组成，创建一个文本框，用户可以在其中输入内容，并通过点击按钮进行操作。
2、代码段的主要功能是允许用户输入一系列以 、分隔的项，并根据长度对这些项进行排序(中文字符优先)，然后将结果重新显示在文本框中。

效果图

html

<div class="box">
    <textarea id="idTextarea" rows="8" onclick="handleStop(event)" ondblclick="handleStop(event)"
        oninput="runInput(event)"></textarea>
    <div>
        <button class="btn type1" onclick="handleClear()">
            清 空
        </button>
        <button class="btn type2" onclick="handleConfirm()">
            确 认
        </button>
    </div>
</div>

1、<div class="box">包含一个文本框和两个按钮。.box类用于外层容器的样式设置。
2、<textarea id="idTextarea" rows="8">这是一个多行文本输入框，id="idTextarea"用于在JavaScript中获取该元素。rows="8"设置文本框的高度。
2.1、onclick="handleStop(event)"和ondblclick="handleStop(event)"事件用于阻止事件冒泡。
2.2、oninput="runInput(event)"事件在用户输入时触发，并将输入的内容存储在val变量中。
3、<button class="btn type1" onclick="handleClear()">清 空</button>一个按钮，用于清空文本框的内容。
4、<button class="btn type2" onclick="handleConfirm()">确 认</button>一个按钮，用于处理并确认用户输入的内容。

style

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    .box {
        width: 68%;
        display: flex;
        flex-direction: column;

        >textarea {
            resize: none;
            outline: none;
        }

        >div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 18px;

            >button {
                flex: 1;
                margin: 0;
                padding: 6px 0px;
                box-sizing: border-box;
                font-size: 18px;
                background-color: transparent;
                border: none;
                outline: none;
                border-radius: 4px;
                cursor: pointer;
            }

            >button:first-child {
                margin-right: 8px;
            }

            >button:last-child {
                margin-left: 8px;
            }
        }
    }
}

$btnColorList: #6c6d71, #409eff;

@for $i from 1 through length($btnColorList) {
    .btn.type#{$i} {
        $color: nth($btnColorList, $i);
        background: $color;
        color: #ffffff;

        &:hover {
            background: lighten($color, 10%);
        }

        &:active {
            background: darken($color, 10%);
        }

        &:disabled {
            background: lighten($color, 10%);
            color: white;
        }
    }
}

1、body设置整个页面的样式，将内容居中显示。
2、.box设置.box容器的宽度、布局方向(列方向)、内部元素的间距等。
2.1、>textarea设置文本框无法调整大小且无边框样式。
2.2、>div设置按钮所在的div，确保按钮之间有一定的间距，并且在页面中水平排列。
3、$btnColorList定义一个按钮颜色列表，其中包含两个颜色代码#6c6d71(灰色)和#409eff(蓝色)。
4、@for使用循环为.btn类的不同类型按钮设置背景颜色、文字颜色和不同状态下的样式(悬停、激活和禁用状态)。

JavaScript

let val = '';

function runInput(event) {
    val = event.target.value;
}

function handleStop(event) {
    event.stopPropagation();
}

function handleClear() {
    if (!val) {
        return alert('无内容可清空');
    } else {
        val = '';
        document.getElementById('idTextarea').value = val;
    }
}

function handleConfirm() {
    if (!val) {
        return alert('请输入内容');
    } else {
        let runSort = (list) => list.sort((a, b) => b.length - a.length);
        let list = [];
        let listA = [];
        let listB = [];
        let result = undefined;

        list = val.split('、');
        list.forEach(item => {
            if (/^[A-Za-z]+$/.test(item)) {
                listB.push(item);
            } else {
                listA.push(item);
            }
        });
        listA = runSort(listA);
        listB = runSort(listB);
        result = [...listA, ...listB];
        result = result.toString();
        result = result.replace(/,/g, '、');
        document.getElementById('idTextarea').value = result;
    }
}

1、let val = '';定义一个全局变量val，用于存储用户输入的文本内容。
2、runInput(event)在用户输入时调用，将输入的内容保存到val中。
3、handleStop(event)用于阻止点击事件的冒泡，确保事件只在当前元素上触发。
4、handleClear()清空文本框内容的函数。如果文本框为空，弹出警告提示；否则清空文本框内容。
5、handleConfirm()处理并确认用户输入的内容。如果文本框为空，弹出提示；否则，对内容进行处理。
5.1、将文本内容按、分割成多个项。
5.2、如果内容只包含英文字符，则放入listB，否则放入listA。
5.3、对listA和listB按长度从长到短排序，并合并两个列表。
5.4、最终将排序后的内容重新组合并显示在文本框中。