[Vuejs]-Vue-multiselect – How to insert html code in placeholder?

by

0👍

✅

I think you’re trying to add a custom placeholder inside an input field.

to do this you need some mix of css and html.

new Vue({
  el: '#editor',
  data: {
    input: '',
    input2: 'some text'
  },
  computed: {
    placeholderText: function () {
      return `${this.input2} <span>*</span>`
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }
})
#editor div {
  display: inline-block;
}



.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 10px;
  font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

<div id="editor">
  <div class="input-placeholder">
    <input type="text" @input="update">
    <div class="placeholder" v-if="!input" v-html="placeholderText">
      Email <span>*</span>
    </div>
  </div>
</div>

I have created this jsfiddle for my solution.

0👍

you can use css placeholder selector

input::-webkit-input-placeholder { /* Edge */
  color: green!important;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: green!important;
}

input::placeholder {
  color: green!important;
}

Try it, then try to remove the !important.

But information is missing. You want to change the color dynamically or not? or you want to have different colours into the same placeholder?

Leave a comment