jquery（文本框添加符号）

js交互

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script><title>Document</title><style>.upCenter {width: 100%;overflow: hidden;}.upCenter ul {width: 100%;overflow: hidden;padding: 20px 10px;box-sizing: border-box;}.upCenter ul li {width: 100%;overflow: hidden;padding: 10.5px 0;font-size: 14px;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}.upCenter ul li span {display: inline-block;}.upCenter ul li span.upSpan {width: 160px;display: inline-block;color: black;font-weight: normal;margin: 0;padding: 0;}.upCenter ul li p.upCP {display: inline-block;}.upCenter ul li dl {display: inline-block;display: flex;flex-direction: row;justify-content: flex-start;}.upCenter ul li dl dt {margin-right: 10px;padding: 4px 8px;background: #ff9939;border-radius: 2px;cursor: pointer;}.input-textarea {height: 78%;width: 99%;resize: none;border: 1px solid rgb(193, 222, 250);border-radius: 4px;padding: 5px;outline-color: rgba(83, 160, 231, 0.61); // 鼠标聚焦边框颜色}.upText {width: 600px;}</style>
</head><body><div class="upCenter"><ul><li><span class="upSpan">关键词：</span><textarea name="" id="keyWords" class="upText input-textarea"></textarea></li><li><span class="upSpan"></span><dl><dt onclick="keyWord(1)">+</dt><dt onclick="keyWord(2)">|</dt><dt onclick="keyWord(3)">(</dt><dt onclick="keyWord(4)">)</dt></dl></li></ul></div><script>// 关键词操作function keyWord (val) {let keyWrodInput = $("#keyWords").val();let textInput = document.getElementById('keyWords');let insert = textInput.selectionStart;if (val == 1) {textInput.value = textInput.value.substr(0, insert) + ' + ' + textInput.value.substr(insert);} else if (val == 2) {textInput.value = textInput.value.substr(0, insert) + ' | ' + textInput.value.substr(insert);} else if (val == 3) {textInput.value = textInput.value.substr(0, insert) + ' ( ' + textInput.value.substr(insert);} else if (val == 4) {textInput.value = textInput.value.substr(0, insert) + ' ) ' + textInput.value.substr(insert);}textInput.focus();setTimeout(function () {textInput.setSelectionRange(insert + 3, insert + 3);}, 10);}</script>
</body></html>

jquery（文本框添加符号）相关推荐

给文本框添加模糊搜索功能（“我记录”MVC框架下实现）
步骤: 1.在文本框中输入内容时,触发keyup事件: 2.在keyup事件的处理方法中,通过Ajax调用控制器的方法: 3.在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据, ...
WinForm -- 为TextBox文本框添加鼠标右键菜单
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...
滚动条的值如何赋值_如何给Word文本框添加滚动条？史上最详细步骤
在工作中我们经常需要使用Microsoft Word来进行编辑文件等,而Microsoft Word也总是能给我们许多的惊喜,因为它总能帮助我们去解决许多工作上的问题.当有些小伙伴不再是局限于仅仅使用 ...
html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
tkinter向文本框里加内容_给tkinter文本框添加右键菜单
给tkinter文本框添加右键菜单需求:直接右键点击使用tkinter创建的文本框是不会弹出菜单的.我们需要实现右键点击tkinter框架下的Entry对象.Text对象后弹出右键菜单可复制.粘贴和 ...
java框体怎么添加背景图,文本框添加背景图片，文本框背景图片,public class
文本框添加背景图片,文本框背景图片,public classpublic class WatermarkTextField extends JTextField { BufferedImage img ...
java为文本框添加背景颜色,文本框添加背景图片，文本框背景图片,文本框添加水印[Java...
文本框添加背景图片,文本框背景图片,文本框添加水印[Java 文本框添加水印 [Java]代码public class WatermarkTextField extends JTextField { ...
文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View
文字少的时候,直接显示文字:文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字. 1.字少的时候 2.字多的时候自动增加一个垂直滑动条一.问题的来源在一个固定区域显示文字,这些文字有时候会很多 ...
给文本框添加灰色提示文字
html> <head> <title>中国站长天空-网页特效-表单特效-给文本框添加灰色提示文字</title> <meta http-equiv=& ...

jquery（文本框添加符号）

jquery（文本框添加符号）相关推荐

最新文章

热门文章