前端 各位 求一个文本框部分内容不可编辑的方法

一个需求是部分文字只展示在文本框中，后面的内容可以自定义的功能 。求解答

这个需求无法做到.你只能把不可编辑的内容放到文本框外面,
并且把到文本框的边框去掉,与外面的文字一起模拟一个文本框的样子,
类似这样：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.text {
    display: inline-block;
    border: 1px solid #999;
    font-size: 16px;
}
.text input {
    font-size: 16px;
    border-style: none;
    outline-style: none;
}
</style>
</head>
<body>
<div class="text">不可编辑的内容:<input type="text" name="test" value="正常内容" /></div>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

是不是这样子的呀

img

学习一个前端框架即可上手，很简单，自己不需要写太多样式，只要引入就能使用，bootstrap,layui,webUI,vue,react等前端框架都有的哦

vue演示代码如下

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
<div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>
</div>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
var vue=new Vue({
el: '#app',
data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  }
}) 
</script>
</html>

文本定位+首行缩进

img

el组件可以满足