Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Поставить фокус на input (https://javascript.ru/forum/css-html/81798-postavit-fokus-na-input.html)

fori 30.01.2021 14:25

Поставить фокус на input
 
Здраствуйте, подскажите пожалуйста как в vue.js поставить фокус на другой обэкт
Тоесть написать ето на vue.js (код ниже работает)
<input id="first" type="text" onkeyup="if (event.keyCode == 13){foc()}">
<input id="second" type="text" >
<script>
function foc(){
	document.getElementById("second").focus();
}
</script>

рони 30.01.2021 15:01

fori,
может сначала дока и гугля?
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="el">
<input type="text" @keyup="foc" >
<input type="text" ref="second" >
</div>
<script>
let vue = new Vue({
    el: '#el',
    data: {
    },
    methods: {
      foc(event) {
         if (event.keyCode == 13) this.$refs.second.focus();
      }
    }
})
</script>

fori 30.01.2021 15:40

Спасибо))
Можно ли пожалуйста спросить о nextTick,
К примеру
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="vue">
  <button @click="foc">show+focus</button>
  <input type="text" id="ob" v-show="show">
</div>
<script>
	
var vue = new Vue({
  el: '#vue',
  data: {
	  show:false,
  },
  methods: {
   foc(){
	   vue.show=!vue.show;
		document.getElementById("ob").focus();
	   //vue.nextTick(()=> {document.getElementById("ob").focus()}); 
	}
  }
})
</script>

Ето должно создать обэкт и поставить фокус на инпут, но никак не могу заставить nextTick работать, извините пожалуйста что часто задаю глупые вопросы, самому не получается разобратся((

рони 30.01.2021 16:17

fori,
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="vue">
  <button @click="foc">show+focus</button>
  <input type="text" id="ob" v-show="show" ref="test">
</div>
<script>

var vue = new Vue({
  el: '#vue',
  data: {
      show:false,
  },
  methods: {
   foc(){
       (vue.show=!vue.show) && this.$nextTick(() => this.setFocus());
    },
   setFocus() {
        this.$refs.test.focus();
    }
  }
})
</script>


Часовой пояс GMT +3, время: 20:39.