使用input + label替代placeholder

HTML

<div class="input-wrapper">
    <input id="inputID" type="text">
    <label for="inputID">请输入...</label>
</div>

Style

.input-wrapper {
    width: 300px;height: 42px;margin-bottom: 20px;position: relative;
}

.input-wrapper input {
    width: 290px;
    height: 36px;
    line-height: 36px;
    padding: 2px 4px;
    border: 1px solid #DAE5E6;
    background: #F2FEFF none repeat scroll 0% 0%;
    font-family: tahoma,arial,simsun,sans-serif;
}

.input-wrapper label {
    width: 290px;
    height: 36px;
    line-height: 36px;
    padding: 3px 5px;
    font-family: simsun;
    font-size: 14px;
    color: #999;
    **cursor: text;
    position: absolute;
    top: 0px;
    left: 0px;**
}

JS

$(".input-wrapper").on("input", function() {
    var v = $(this).find('input').val();
    if (v == null ||v == "") {
        $(this).find('label').css("display", "block");
    } else {
        $(this).find('label').css("display", "none");
    }
}).trigger("input");
<template> <div class="box-content"> <a-form :style="{ width: '600px' }" @submit="handleSubmit"> <a-form-item label="任务名称"> <a-input v-model="form.name" placeholder="网站名称" /> </a-form-item> <a-form-item label="采集网址"> <a-input v-model="form.gather" placeholder="例如:https://ecp.sgcc.com.cn" /> </a-form-item> <a-form-item label="网站介绍"> <a-space direction="vertical" size="large" style="width: 100%"> <a-mention v-model="form.introduction" :data="['Bytedance', 'Bytedesign', 'Bytenumner']" type="textarea" placeholder="请输入网站介绍" /> </a-space> </a-form-item> <a-form-item label="模板名称"> <a-button class="custom-button" html-type="submit">选择模板</a-button> </a-form-item> <a-form-item> <a-button class="save-button">保存设置</a-button> </a-form-item> </a-form> </div> </template> <script lang="ts" setup> import { reactive, defineExpose } from 'vue'; interface FormData { name: string; gather: string; introduction: string; } const form = reactive<FormData>({ name: '', gather: '', introduction: '', }); function handleSubmit() { console.log('Form submitted:', form); } defineExpose({ form, handleSubmit, }); </script> <style lang="less" scoped> .custom-button { border: 1px solid rgb(25, 141, 147); color:rgb(25,141,147); } .custom-button:hover{ border: 1px solid rgb(25, 141, 147); color:rgb(25,141,147); } .box-content { width: 100%; background-color: #ffffff; border-radius: 4px; padding: 16px; margin: 16px; } .save-button { width: 120px; background-color: rgb(25, 141, 147); color: #ffffff; } </style>请检查代码并修复
07-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值