Let's suppose I have an input like this:
<input type="text" v-model="x" ref="refInput">
If I want this input to focus programmatically, I can do:
this.$refs['refInput'].focus()
Is there a way to make the input lose the focus programmatically?
I tried this without success:
this.$refs['refInput'].unfocus() // This does not work!
This is actually a simple JavaScript question. You focus on an input and leave focus with blur. What you need to do is to run the blur function.
example:
this.$refs.refInput.blur()
Related
Recenty, I noticed that the checkboxes that I wrote a click event worked incorrectly from time to time. Not everytime but sometimes their #click event works in reverse. Here is what I am trying to tell;
<label class="form-switch">
<input type="checkbox" #click="showElement = !showElement"/>
</label>
I have a simple form switch and there are some css on it which I didn't put here, it looks like a toggle switch. It toggles a data which is showElement. The default state of the data is false and when you click on the toggle it becomes true and false respectively.
<div v-show="showElement>
some content here
</div>
When the showElement is true I want to display the above div, and when it becomes false, I want it to be hidden. There is no problem with that. But here is my question;
If my observation is corret, usually when the project is started for the first time, in other words, when I type npm run serve and start the project, I immadiately go and check if it is working fine or not so I click on the checkbox very quickly over and over andsometimes the click event breaks down and starts working backwards. I mean, when the switch is off, the content is visible, when it is false, the div is showing, but it should be reversed. This happens sometimes when I browse the other pages of the project and return to this component. Is this a bug? Or am I doing something wrong? In the first version of the code it was like below;
<label class="form-switch" #click="showElement = !showElement>
<input type="checkbox"/>
</label>
I accidentally typed the click event to the label element instead of input. I thought that might be the problem. I am still thinking that is the problem but the bug that I explained above still happens sometimes. Do you know why? Can anyone explain?
Usually i find that with checkboxes in VueJS #Click is not the way to go. Try to use #Change event instead. This should make it more consistent.
The reason behind this is that the click event triggers before the value has been updated. Therefore creating the risk of it overwriting the old value instead of the newly updated one
EDIT:
I actually think in this case you might even be able to get around this by simply adding a v-model to the checkbox like so:
v-model="showElement" instead of having either #click or #change.
Verison 1:
<label class="form-switch">
<input type="checkbox" #change="showElement = !showElement"/>
</label>
Version 2:
<label class="form-switch">
<input type="checkbox" v-model="showElement"/>
</label>
Check this fiddle: https://jsfiddle.net/x4wykp2u/4/
Hope this makes sense
I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the #filter callback.
I have currently two problems:
Whenever I click outside of the input field the input text is lost and the popup disappears.
If I click on the input the current text remains, but the pop is hidden until I click on it again.
For the latter issue, one workaround is to force the popup to show upon click:
<q-select
ref="input"
...
#click.native.prevent="onClick"
>
...
onClick(){
if( this.searchFilter.length > 0){
this.$refs.input.showPopup()
}
}
However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using #click.native.stop instead of #click.native.prevent to no avail.
As for issue number 1 I haven't even found a workaround yet.
Here is a related issue, though the popup disappearing was a wanted behavior in his case.
I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.
The trick was to use #click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here
IBM web experience factory uses dojo library, I am wondering if the I set <input type="text" name="usrname" required> in the consumer model, does the button still work if the input is not filled?
Well, HTMLFormElement has a method called checkValidity() which you can use.
So, in your case, you could use the :input selector with dojo/query to query all input elements inside a form (includes buttons, checkboxes, textfields, text areas and select boxes) and then use the onChange event to check if the form is valid and change the buttons disabled attribute.
For example:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
Now all you need to do is to make sure that your button is initially disabled/enabled depending on the initial state of the form.
A full example can be found on JSFiddle: http://jsfiddle.net/j8L6j77g/
I need to create a code to change an example text to a user-defined value when the user types in an input field (Similar to the preview field when writing a question on Stack Overflow).
This needs to be achieved without the use of HTML5 or Flash as the users will be running IE8, not all will have Flash plug-ins installed.
As such I have started by looking at DHTML to achieve the desired effect. Currently I can change the example text when a user types in the input field but only to a pre-defined value ("Example" in the code below), how should I edit this code to display the user-defined value?
JS
function changetext(id)
{
id.innerHTML="Example";
}
HTML
<form>
Content:<input type="text" id="input" onkeyup="changetext(preview)" />
</form>
<p id="preview">No content found</p>
You need to have something like this in the function:
function changetext(id){
var info = document.getElementById('input').value();
id.innerHTML = info;
}
This js is not fully correct. I would highly recommend you start using a javascript library like jQuery. It makes this a menial task.
Edited:
jQuery will work in IE8 just fine. in jQuery you will not need to attach js to your input. The code would look like this.
$('#input').click(function(){
$('#preview).html(this.val());
});
It is a lot cleaner and doesnt have js in the html.
How can I avoid the dojo parser showing a hidden element after it's parsed?
<input type="checkbox" dojoType="dijit.form.CheckBox" style="display:none">
When the dojo parser is done, the dijit checkbox will be shown, but the input "inside" it, will still be hidden. I want the dojo parser to create the dijit checkbox, but keep it hidden.
I think that's a limitation of how Dijit works... it's the construction of the widget that's doing this, not the parser per se. The style element gets mapped to the INPUT element, so there is no way to do this short of instantiating the widget directly and hiding it before placing it in the DOM. Updating the style after the parser does its thing would probably result in some unwanted redraws.
I use dijit.layout.BorderContainer with style="height:100%;width:100%;visibility:hidden" and it's working fine for me.