element+ input光标插入关键词及删除关键词整体

最新推荐文章于 2024-04-22 11:40:00 发布
最新推荐文章于 2024-04-22 11:40:00 发布
阅读量759 收藏 8
点赞数 7
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZT_KEBEI/article/details/135193490
版权 
// 申请模板
<template>
    <div class="app-container">
        <el-row type="flex" :gutter="20" justify="space-between">
            <!-- 左侧表单 -->
            <el-col :span="10">
                <div class="title">
                    模板内容
                </div>
                <el-form ref="ruleFormRef" :model="form" label-width="120px" :rules="rules">
                    <el-form-item label="模板标题" prop="title">
                        <el-input v-model="form.title" />
                        <p>展示为消息推送的标题，请您谨慎填写，建议标题以“通知”
                            或“提醒”作为结尾</p>
                    </el-form-item>

                    <el-form-item label="模板内容" prop="preContent">
                        <div class="dis-row">
                            <el-col :span="24">
                                <el-input id="inputRef1" ref="inputRef3" type="textarea" placeholder="请填写模板内容" @blur="blur"
                                    @keydown.delete.native="del" v-model="form.preContent" />
                            </el-col>

                            <el-col>
                                <span class="add-btn-border" @click="add1" style="margin-left: 20px;">插入数值</span>
                            </el-col>
                        </div>

                        <p>可插入多个数值，如不需要模板开头可不填写此项</p>
                    </el-form-item>

                    <!-- 动态创建的数值元素 -->
                    <el-form-item v-for="(item, i) in form.templateItemReqList" :key="i"
                        :prop="`templateItemReqList[${i}].itemContent`" :rules="[{
                            required: true,
                            message: '',
                            trigger: 'blur'
                        },
                        { required: true, trigger: 'blur', validator:(rule, value, callback)=> validatePlaceholder(rule, value,callback,item)}

                        ]">
                        <el-col :span="6">
                            <el-input v-model="item.itemContent" placeholder="请填写数值名称" />
                        </el-col>
                        <el-col :span="18">
                            {{ item.placeholder }} :
                            <span class="add-btn-border" @click="addBodyNums(item)" style="margin-left: 20px;">插入数值</span>
                            <span class="del-btn-border" @click="delBodyItem(i)" style="margin-left: 20px;">删除数值</span>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <p @click="addBodyItem" class="add-btn">增加数值</p>
                    </el-form-item>



                    <el-form-item prop="postContent">
                        <div class="dis-row">
                            <el-col :span="24">
                                <el-input id="inputRef3" ref="inputRef3" type="textarea" placeholder="请填写模板结尾" @blur="blur"
                                    @keydown.delete.native="delFootNums" v-model="form.postContent" />
                            </el-col>

                            <el-col>
                                <span class="add-btn-border" @click="addFootNums" style="margin-left: 20px;">插入数值</span>
                            </el-col>
                        </div>

                        <p>可插入多个数值，如不需要模板开头可不填写此项</p>
                    </el-form-item>


                    <el-form-item label="消息链接" prop="needUrl">
                        <el-radio-group v-model="form.needUrl">
                            <el-radio :label="1">
                                需要 <span v-show="form.needUrl == 1" style="color: #aaa;">{data1|链接}</span>
                            </el-radio>

                            <el-radio :label="0">
                                不需要
                            </el-radio>
                        </el-radio-group>

                        <p>
                            * 如果您不需要消息链接，则推送消息时不展示“查看详情”。 如果您设置了需要消息链接且提供了链接参数。则消息推送时展示“查看详情”。
                        </p>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(ruleFormRef)">提交申请</el-button>
                    </el-form-item>
                </el-form>

            </el-col>
            <!-- 右侧展示 -->
            <el-col :span="10">
                <div class="messageExample">
                    <div class="title">
                        消息示例
                    </div>
                    <div class="messageExample-contentBox">
                        <div class="messageExample-contentBox-title">
                            {{ form.title }}
                        </div>
                        <div class="messageExample-contentBox-preContent">
                            {{ form.preContent }}
                        </div>
                        <div class="messageExample-contentBox-item" v-for="(item, i) in form.templateItemReqList" :key="i">

                            <div v-if="item.itemContent && item.placeholder">
                                {{ item.itemContent }}：<span style="
                            color: #aaa;
                            ">
                                    {{ item.placeholder }}
                                </span>
                            </div>

                        </div>
                        <div class="messageExample-contentBox-postContent">
                            {{ form.postContent }}
                        </div>
                        <div v-show="form.needUrl == 1" class="messageExample-contentBox-seeDetail">
                            <span>查看详情</span> <span>></span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <diaLog @diaLogConfirm="diaLogConfirm" :dialogInfo="dialogInfo">
            <template #dialogMain>
                <div>
                    <div v-for="(value, key, index) in form">
                        <div class="item" v-if="form2Chinese.hasOwnProperty(key)">

                            <span class="item-key">

                                {{ form2Chinese[key] }}

                            </span>

                            <span class="item-value">

                                <span v-if="key == 'needUrl'">
                                    {data1|链接}
                                </span>

                                <span v-else-if="key == 'templateItemReqList'" class="templateItemList">
                                    <span v-for="(item2, i2) in value" :key="i2" class="templateItemList-item">
                                        {{ item2.itemContent }}<span style="margin-right:  10px;">：</span> {{
                                            item2.placeholder
                                        }}
                                    </span>
                                </span>
                                <span v-else> {{ value }}</span>
                            </span>

                        </div>
                    </div>
                </div>
            </template>
        </diaLog>

    </div>
</template>

<script setup name="templateApply">
import diaLog from './components/diaLog.vue';
import { h, nextTick, reactive, ref, toRefs, } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import * as messageTemplate from '@/api/messageTemplate'

const inputRef3 = ref(null)

// do not use same name with ref
const data = reactive({
    form: {
        title: '',//模板标题
        preContent: '',//模板内容
        templateItemReqList: [
            {
                itemContent: "",//内容（数值名称）
                placeholder: "",//占位符（数值）
            },
        ],
        postContent: "",//模板结尾
        needUrl: "",//是否需要链接
        status: 1,//状态 （0 保存草稿 1提交审核 2审核通过）
    },
    // 对对象中属性进行定义
    form2Chinese: {
        id: "模板编号",
        title: "模板标题",
        preContent: "模板内容",
        templateItemReqList: "",
        postContent: "",
        needUrl: "消息链接",
    },

    tabActiveIndex: 0, //增加数值的tab高亮项
    headNums: 0, //模板内容中的数值数量
    bodyNums: 0, //模板身体中的数值数量
    footNums: 0, //模板结尾中的数值数量
    focusIndex: 0,    // 模板内容中的光标位置

    // add2的插入值
    templateItemReqList: [
        {
            itemContent: "",//内容（数值名称）
            placeholder: "",//占位符（数值）
        },
    ],
    insertTxt2: ""
})

const { form, form2Chinese } = data

const ruleFormRef = ref()
const rules = reactive({
    title: [
        { required: true, message: '', trigger: 'blur' },
    ],
    preContent: [
        { required: true, message: '', trigger: 'blur' },
    ]
    ,
    postContent: [
        { required: true, message: '', trigger: 'blur' },
    ],
    needUrl: [
        { required: true, message: '请选择是否需要消息链接', trigger: 'blur' },
    ],
})

const validatePlaceholder = (rule, value, callback, item) => {
    if (value) {
        console.log('placeholder:',{item});
        if (!item.placeholder) {
            callback(new Error('请插入该项数值'))
        } else {
            callback()
        }
    } else {
        callback()
    }
}


const dialogInfo = reactive({
    title: "模板预览",
    show: false,
    cancelText: "取消",
    confirmText: "确认提交",

})



const onSubmit = async (formEl) => {
    console.log({ formEl });
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', form)
            dialogInfo.show = true
        } else {
            console.log('error submit!', fields)
        }
    })

}

// diaLog从子组件接收的数据 
const diaLogConfirm = async (value) => {
    console.log({ value });
    const res = await messageTemplate.addOrUpdateTemplate(form)
    console.log({ res });
    if (res.code == 200) {
        dialogInfo.show = false
        ElMessage({
            message: '提交成功',
            type: 'success',
        })
    }

}

const blur = (e) => {
    console.log('光标位置：', e.srcElement.selectionStart);
    data.focusIndex = e.srcElement.selectionStart
}

// head 插入模板内容的数值
const add1 = () => {
    console.log('位置：', inputRef3.value.ref.selectionStart);
    // 聚焦
    inputRef3.value.focus()
    let items = [
        '时间',
        '金额',
        '数字',
        '文本'
    ]
    ElMessageBox({
        title: '请选择数据类型',
        message: () => h('p', null,
            items.map((item, i) => {
                return h('div', {
                    style: {
                        color: data.tabActiveIndex === i ? '#FFF' : 'teal',
                        backgroundColor: data.tabActiveIndex === i ? 'teal' : '#FFF',
                        border: '1px solid teal',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        padding: '8px',
                        marginBottom: '10px'
                    },
                    onClick: (e) => {
                        console.log({ e });
                        data.tabActiveIndex = i


                    }
                }, item)
            })
        ),

    }).then(() => {
        data.headNums++
        // 需要插入的数值
        let insertTxt = `{head.data${data.headNums}|${items[data.tabActiveIndex]}}`
        form.preContent = form.preContent.slice(0, data.focusIndex) + insertTxt + form.preContent.slice(data.focusIndex)

        // 将光标定到插入后的位置
        nextTick(() => {
            inputRef3.value.focus()
            inputRef3.value.ref.selectionStart = data.focusIndex + insertTxt.length
            inputRef3.value.ref.selectionEnd = data.focusIndex + insertTxt.length
        })
    })

}
// 模板内容的删除
const del = (e) => {
    console.log({ e });
    console.log({ form });
    let content = form.preContent
    if (!content) return//没有内容就不用进行后面操作  
    let start = e.target.selectionStart//光标起始位置  
    let end = e.target.selectionEnd//光标起始位置  

    // 拿到整个需要删除的变量
    if (start == end) {
        // 获取光标左侧最近的"{"位置  
        const leftIndex = content.substr(0, start).lastIndexOf("{")
        //  判断光标左侧是否有"{" 来判断是否有插入的数值变量
        if (leftIndex != -1) {
            // 如果拿到的话 获取光标右侧最近的"}" 
            const rightIndex = leftIndex + content.substr(leftIndex).indexOf("}")
            console.log(start, end, leftIndex, rightIndex);
            // 判断光标是否在需要删除的变量中
            if (start > leftIndex && start <= rightIndex + 1) {
                console.log('截取的字符串：', { leftIndex }, { rightIndex }, content.substr(leftIndex, rightIndex + 1));
                e.target.setSelectionRange(leftIndex, rightIndex + 1)
                e.preventDefault()
            }
        }
    }
}


//body 插入数值条数
const addBodyItem = () => {
    console.log('add2');
    nextTick(() => {
        form.templateItemReqList = [...form.templateItemReqList, {
            itemContent: "",
            placeholder: "",
        }]
    })
}

const addBodyNums = (item) => {
    let items = [
        '时间',
        '金额',
        '数字',
        '文本'
    ]
    ElMessageBox({
        title: '请选择数据类型',
        message: () => h('p', null,
            items.map((item, i) => {
                return h('div', {
                    style: {
                        color: data.tabActiveIndex === i ? '#FFF' : 'teal',
                        backgroundColor: data.tabActiveIndex === i ? 'teal' : '#FFF',
                        border: '1px solid teal',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        padding: '8px',
                        marginBottom: '10px'
                    },
                    onClick: (e) => {
                        console.log({ e });
                        data.tabActiveIndex = i


                    }
                }, item)
            })
        ),

    }).then(() => {
        data.bodyNums++
        // 需要插入的数值
        let insertTxt = `{body.data${data.bodyNums}|${items[data.tabActiveIndex]}}`
        item.placeholder = insertTxt
    })
}

// 删除数值
const delBodyItem = (i) => {
    if (form.templateItemReqList.length <= 1) {
        ElMessage('已经是最后一个了')
        return
    }
    form.templateItemReqList = form.templateItemReqList.filter((item, index) => {
        return i != index
    })
    form.templateItemReqList.forEach((item, i) => {
        item.placeholder = `{data${i + 1}}`
    })
}

// 模板结尾的新增
const addFootNums = () => {
    console.log('位置：', inputRef3.value.ref.selectionStart);
    // 聚焦
    inputRef3.value.focus()
    let items = [
        '时间',
        '金额',
        '数字',
        '文本'
    ]
    ElMessageBox({
        title: '请选择数据类型',
        message: () => h('p', null,
            items.map((item, i) => {
                return h('div', {
                    style: {
                        color: data.tabActiveIndex === i ? '#FFF' : 'teal',
                        backgroundColor: data.tabActiveIndex === i ? 'teal' : '#FFF',
                        border: '1px solid teal',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        padding: '8px',
                        marginBottom: '10px'
                    },
                    onClick: (e) => {
                        console.log({ e });
                        data.tabActiveIndex = i
                    }
                }, item)
            })
        ),

    }).then(() => {
        data.footNums++
        // 需要插入的数值
        let insertTxt = `{foot.data${data.footNums}|${items[data.tabActiveIndex]}}`
        form.postContent = form.postContent.slice(0, data.focusIndex) + insertTxt + form.postContent.slice(data.focusIndex)

        // 将光标定到插入后的位置
        nextTick(() => {
            inputRef3.value.focus()
            inputRef3.value.ref.selectionStart = data.focusIndex + insertTxt.length
            inputRef3.value.ref.selectionEnd = data.focusIndex + insertTxt.length
        })
    })

}
// 模板结尾的删除
const delFootNums = (e) => {
    console.log({ e });
    console.log({ form });
    let content = form.postContent
    if (!content) return//没有内容就不用进行后面操作  
    let start = e.target.selectionStart//光标起始位置  
    let end = e.target.selectionEnd//光标起始位置  
    // 拿到整个需要删除的变量
    if (start == end) {
        // 获取光标左侧最近的"{"位置  
        const leftIndex = content.substr(0, start).lastIndexOf("{")
        //  判断光标左侧是否有"{" 来判断是否有插入的数值变量
        if (leftIndex != -1) {
            // 如果拿到的话 获取光标右侧最近的"}" 
            const rightIndex = leftIndex + content.substr(leftIndex).indexOf("}")
            console.log(start, end, leftIndex, rightIndex);
            // 判断光标是否在需要删除的变量中
            if (start > leftIndex && start <= rightIndex + 1) {
                console.log('截取的字符串：', { leftIndex }, { rightIndex }, content.substr(leftIndex, rightIndex + 1));
                e.target.setSelectionRange(leftIndex, rightIndex + 1)
                e.preventDefault()
            }
        }
    }
}

</script>

<style lang="scss" scoped>
.active {
    background-color: #1ABC9C;
    color: #fff;
}

.app-container {
    .el-row {
        margin-bottom: 20px;
        padding: 20px;
    }

    p {
        color: #AAAAAA;
        font-size: 12px;
        margin: 0;
        padding: 0;
        line-height: 18px;
    }

    .add-btn {
        color: #3BB19C;
    }

    .add-btn-border {
        color: #1ABC9C;
        border: 1px solid #1ABC9C;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .del-btn-border {
        color: #ff0062;
        border: 1px solid #ff0062;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .dis-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .title {
        color: #1ABC9C;
        margin-bottom: 20px;
    }

    .item {
        display: flex;
        margin-bottom: 20px;

        .item-key {
            margin-right: 10px;
            width: 80px;
        }

        .item-value {
            flex: 1;
            color: #7F7F7F;
        }

        .templateItemList {
            display: flex;
            flex-direction: column;
        }

        .templateItemList-item {
            margin-bottom: 10px;
        }
    }

    .messageExample {

        .messageExample-contentBox {
            font-size: 14px;
            border: 1px solid #ccc;

            .messageExample-contentBox-title {
                font-weight: 700;
                padding: 10px 10px 0;
            }

            .messageExample-contentBox-preContent {
                padding: 10px 10px 0;
            }

            .messageExample-contentBox-item {
                padding: 10px 10px 0;
            }

            .messageExample-contentBox-postContent {
                padding: 10px 10px;
            }

            .messageExample-contentBox-seeDetail {
                color: #aaa;
                border-top: 1px solid #ccc;
                margin-top: 10px;
                padding: 10px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>
ZT_KEBEI
关注
在 Input 和 Textarea 光标处添加字符串
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-06 1567
例如，在聊天应用中，我们可能会在用户键入 “@” 符号时触发自动完成建议，这时候需要确保插入的文本不会破坏现有的输入流。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。为了在光标位置插入文本，我们需要获取光标的位置，然后根据该位置分割原始文本，插入新文本，最后重新拼接文本。对于富文本编辑器来说，插入格式化的文本时，我们可能需要考虑如何保持光标位置不变，或者如何处理嵌套的标签。在文本输入框中，插入点指的是用户光标所在的位置。专栏系列（点击解锁）
Textarea在光标停留处插入文字
05-28
标题“Textarea在光标停留处插入文字”涉及到的是如何在`Textarea`中实现文字的动态插入，使得新添加的文字能精确地出现在用户当前光标所在的位置。这通常涉及到JavaScript的DOM操作和事件监听。 在HTML中，`...
input输入框根据匹配字符进行整体移除
WXC_MangGuo的博客
04-22 358
【代码】input输入框根据匹配字符进行整体移除。
element ui - el-input 实现点击插入关键词功能
nunumaymax的博客
09-15 1059
el-input文本框，通过点击下方关键词，在文本框中插入该词；光标移动到文本之间，再点击下方关键词，在光标的位置插入该词；插入关键词后，文本框获取焦点，并将光标的位置定位到关键词后点击按钮，在文本框指定位置插入该按钮的关键词。参考链接：输入文本框实现点击插入词功能。
element中动态新增（删除）input输入框等
bierxiensi的博客
04-08 5151
效果如下 新增一列后 1. 首先为button添加事件响应 响应函数如下图，可以看到这里新增的一列包含name， code， value三个值。每次新增时，数组customParam进行入栈操作，入栈参数为name，code，value组成的数组，计数值customBillParamLength增1 2. input框展示部分，见下图。根据customPayParamLength作为循环...
elm中el-input框无法输入删除
qq_46133770的博客
08-16 362
elm中el-input框无法输入删除
vue 如何获取input中光标位置，并且点击按钮在当前光标后追加内容
weixin_49637830的博客
06-07 2496
1.第一步：监听输入框的鼠标失焦事件 <el-input @blur="handleInputBlur"></el-input> 2.第二步：获取失去交点时的光标在输入内容中的位置，data里定义一个变量存储如 blurIndex data() { return { formulaValue：null, blurIndex: null, }; } 3.第三步：具体函数(上才艺) insert_flg(flg) {
vue 获取input中光标位置，并且点击按钮在当前光标后追加内容
阳光
11-09 2552
就是获取光标位置 然后截取拼接字符串 重新填入重新设置光标 function insertInputTxt(id, insertTxt){ var elInput =document.getElementById(id); var startPos = elInput.selectionStart; var endPos = elInput.selectionEnd; if(startPos ===undefined|| endPos ===undefined)return var txt
Element Input输入框的使用方法
10-15
在 Element UI 中，`Input` 输入框是基础且重要的组件之一，用于用户输入文本数据。本篇文章将深入探讨 `Element Input` 输入框的使用方法。 ### 基础用法 `<el-input>` 组件是最基本的输入框，可以通过 `v-model`...
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
在这里，我们创建一个新的输入元素，将其插入到光标位置，然后删除这个输入元素，以防止其出现在页面上。 ```javascript dropRelease(event, nodeValueName) { event.preventDefault(); let textNode = ...
获取div编辑框，textarea，input text的光标位置 兼容IE，FF和Chrome的方法介绍
09-05
对于textarea和input text，可以通过element.selectionStart属性来直接获取光标位置。但对于可编辑的div元素，这种属性则不可用。 为了兼容各种浏览器，需要对不同浏览器进行检测并采取不同的处理策略。在上述代码...
vue使用el-tag完成添加标签操作
请叫我欧皇！的博客
12-15 1500
需求：做一个添加标签的功能，点击添加后输入内容后回车可以添加，并且标签可以删除。
elementui el-form清除input里面的内容
朱远辉的博客
04-26 1557
2.在el-form-item加prop对应dialogForm对象里面需要清除的属性。1.在el-form加ref=””做标记。
vue如何在光标处插入文字
xcc_2269861428的博客
03-23 3749
列子： 如何 想要在 侧的事故打打 的中间插入 下面的 日期，时间等文字 思路，通过e.srcElement.selectionStart 记录光标位置，然后通过slice截取拼接字符串 <el-form-item label="计划名称" prop="campaignName"> <el-input v-model="form.campaignName" size="small" style="width: 800px;" maxlength="100
input文本框中根据光标位置添加新的字符串
web_QinYiBing的博客
11-15 945
【代码】在vue框架中，需要再文本框中根据光标位置加入新的字符串。并且光标一直在新加的字符串后面，即使失焦也是一样的
vue 点击添加多个input及多个关键字
weixin_43285861的博客
11-10 2719
html <template> <div> <el-button type="primary" size="small" @click="addInput">添 加</el-button> <div v-for="(item,i) of eventPlanForm.matchKeywordArray" :key="i" > <el-input type="text" v-model="keywordList[i]" place
通过vue和elementui实现查找多关键词高亮
weixin_51616500的博客
10-17 421
通过vue和elementui实现查找多关键词高亮
input里面生成标签
一个前端工作者的博客
10-20 5578
input里面生成标签 方式一，自动增长 缺点，最后过长有显示问题。 优点，光标随着标签变。 组件代码如下：直接引用即可。 <template> <div class="yh-label-input" > <div class="yh-tag-box" ref="tagBox"> <el-tag v-for="(tag,index) in tags" :key="index" closable @close="de
el-tag和el-input，输入和标签切换使用的方法
xx820702的博客
05-27 4030
<template slot-scope="scope"> <!-- 循环渲染Tag标签 --> <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable >{{ item }}</...
如何给el-input插入光标
最新发布
01-22
### 设置或移动 Element UI `el-input` 组件中的光标位置 为了在 Vue.js 中操作原生 DOM 属性，比如设置光标的起始位置，在使用 Element UI 的 `<el-input>` 组件时可以通过访问底层的输入框元素实现这一功能。由于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值