Web前端之根据字符串长度从长到短排序、中文字符串优先、样式循环、禁止冒泡、悬浮、激活、禁用、点击、切割、替换、stopPropagation、textarea、replace、split、sort
智码帮MJ682517 2024-09-16 13:03:01 阅读 50
MENU
前言效果图HtmlStyleJavaScript
前言
1、代码段由HTML、CSS(使用Sass语法)和JavaScript组成，创建一个文本框，用户可以在其中输入内容，并通过点击按钮进行操作。
2、代码段的主要功能是允许用户输入一系列以 <code>、分隔的项，并根据长度对这些项进行排序(中文字符优先)，然后将结果重新显示在文本框中。
效果图
Html
<code><div class="box">code>
<textarea id="idTextarea" rows="8" onclick="handleStop(event)" ondblclick="handleStop(event)"code>
oninput="runInput(event)"></textarea>code>
<div>
<button class="btn type1" onclick="handleClear()">code>
清 空
</button>
<button class="btn type2" onclick="handleConfirm()">code>
确 认
</button>
</div>
</div>
1、
<div class="box">code>包含一个文本框和两个按钮。.box类用于外层容器的样式设置。
2、
<textarea id="idTextarea" rows="8">code>这是一个多行文本输入框，id="idTextarea"code>用于在JavaScript中获取该元素。rows="8"code>设置文本框的高度。
2.1、
onclick="handleStop(event)"code>和ondblclick="handleStop(event)"code>事件用于阻止事件冒泡。
2.2、
oninput="runInput(event)"code>事件在用户输入时触发，并将输入的内容存储在val变量中。
3、
<button class="btn type1" onclick="handleClear()">清 空</button>code>一个按钮，用于清空文本框的内容。
4、
<button class="btn type2" onclick="handleConfirm()">确 认</button>code>一个按钮，用于处理并确认用户输入的内容。
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、最终将排序后的内容重新组合并显示在文本框中。
上一篇： [项目][WebServer][TcpServer]详细讲解
下一篇： App及web反编译方案
本文标签
Web前端之根据字符串长度从长到短排序、中文字符串优先、样式循环、禁止冒泡、悬浮、激活、禁用、点击、切割、替换、stopPropagation、textarea、replace、split、sort
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。