Im using vue-drag-resize from https://github.com/kirillmurashov/vue-drag-resize.
I can't focus and type anything inside input text field if it is placed inside vue-drag resize component. Does anybody know solution how to fix this problem?
I've faced this issue when I'm using vue-drag-resize npm on my vue project.
In the vue-drag-resize container, input field didn't work.
So I fixed it with input focus function
This is Code Example
<template>
<VueDragResize>
<input v-model="name" ref="input" #click="inputClicked" />
</VueDragResize>
</template>
<script>
...
...
methods: {
inputClicked() {
this.$refs.input.focus()
}
}
</script>
Sometimes, we will have "... .focus is not a function" error.
If you faced this error, please try like this
this.$refs.input[0].focus()
this.$refs.input.$el.focus()
Either one will work.
#activated="onActivated"
methods: {
onActivated() {
this.$refs['yourinput'].focus();
}
Related
I'm trying to use the jquery mask and vue plugin, my code:
HTML:
<div class="mb-2">
<label class="form-label">Salary</label>
<input v-model="newEmployeeSalary" class="form-control moneyMask" id="employeeSalary" required>
</div>
JS:
$(document).ready(function($){
$('.money').mask('000.000.000.000.000,00', {reverse: true});
});
The problem is that the inputed value changes after clicking in another div.
Example :
Here I'm adding a money value, and the mask works perfectly:
Then, here I just clicked on the next input of the form and the Salary input mask breaks:
My vue code:
data() {
return {
newContractTotalValue: '',
}
},
I noticed that if I remove the v-model the error dissapers, but I need to use it.
Can someone help me with that ?, I really have no idea what to do
Try like this:
$('#employeeSalary').mask('000.000.000.000.000,00', { reverse: true });
I am using react-final-form and TextareaAutosizein my example .I am trying to get the value of text-area but not able to do that.
I am able to get value of input field but not textarea
here is my code
https://codesandbox.io/s/react-final-form-simple-example-rd3rc
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
name="operatingPinCode"
placeholder="Notes"
label="About"
/>
</div>
API link
https://final-form.org/docs/react-final-form/examples/simple
https://www.npmjs.com/package/react-textarea-autosize
Your final-form code is working fine. The problem I think lies with TextAreaAutosize, since it doesn't know how to pass data directly to your form. So you might need to add a handler on that field for the onChange event.
Based on the final form documentation, this code sample below seems to work just fine:sandbox-code Just checkout the second attempt section.
You can get value by this pop:
`onChange={(event) => {
console.log(event.target.value)
}}`
This question already has answers here:
Check if HTML snippet is valid with JavaScript
(9 answers)
Closed 4 months ago.
I have an component which basically takes everything from input and renders the html:
<template>
<div>
<input type="text" v-model="html">
<VRuntimeTemplate :template="html" />
</div>
</template>
<script>
import VRuntimeTemplate from 'v-runtime-template'
export default {
data: () => ({
html: ''
}),
components: {
VRuntimeTemplate
}
}
</script>
Now when I start to type then it will obviously throw me the error saying the input value doesn't have closing or ending tag.
Is there a way to validate HTML beforehand? It works fine with v-html but there's a problem with third party modules.
Sandbox: https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14
Depending on when you need to validate the HTML there are a couple of options.
To validate input dynamically you can follow this answer:
Check if HTML snippet is valid with JavaScript
If you want to validate the HTML output of the Vue Component there is a vue-cli plugin here:
https://gitlab.com/html-validate/html-validate-vue
I ran into the same issue and ended up going with the first option as I need to validate user supplied HTML that will be emitted in another vue app.
You need to wrap it in a div to work, follow example below
<v-runtime-template :template="`<div>${template}</div>`"/>
Noob at polymer here, so please bear with me.
I'm trying to learn how to create a form, one that requires the user to input text into a textbox, before hitting "Submit". Should the user hit "Submit" without anything in the textbox, the textbox is highlighted red, and displays an error message, etc.
Here's my code (no validation yet) so far:
<dom-module id="accountability-ticket">
<template>
<paper-dialog with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" id="diagTicket">
<h2>I Own It Ticket</h2>
<div>
<paper-input-container id="gcashDeco" required error="GCash Ref. Required">
<input id="gcashText" is="iron-input">
</paper-input-container>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-click="confirmClick">Submit</paper-button>
</div>
</div>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "accountability-ticket",
confirmClick: function(event){
console.log(event);
var gCashDeco = document.getElementById('gcashDeco');
var gCashText = document.getElementById('gcashText');
}
});
</script>
I've been reading the Polymer documentation, and so far came up with two things:
<paper-input> doesn't validate, per se, according to v0.5 - It must be wrapped in <paper-input-decorator> first.
Version 1.0 is even less clear than that, with <paper-input-container> instead of <paper-input-decorator>, and mixed tags in the demo pages.
Given that I want to stick with the latest version (v1.0), what do I need to add to my code to get it to check if the textbox is empty, and display an error message if it is?
Thanks.
Yep, the Polymer docu is somewhat confusing, but as a general rule of thumb: always have a look at the behaviours the element is equiped with.
So, paper-input (in 1.0) comes with PaperInputBehavior and this implies that you can simply write the following:
<paper-input label="Input label" required error-message="Field required!"></paper-input>
<paper-input label="Input label" minlength="4" maxlength="10" auto-validate></paper-input>
<paper-input label="Input label" pattern="MY_REGEX" auto-validate></paper-input>
<paper-input label="Input label" validator="myvalidator"></paper-input>
auto-validate makes the input – of course – validate as it is being typed into. myvalidator must be an element implementing the IronValidatorBehavior and inserted somewhere on the page. If you don't want the fields to be auto-validating or wanna do it yourself, call validate() on that field or set the invalid-flag and the error message will be shown. You can even adjust the message programmatically.
While the validator seems to be useful, I've found it to be simple enough to test the inputs directly. This will do what you need:
...
<div>
<paper-input-container id="gcashDeco">
<paper-input-error>Field is empty</paper-input-error>
<input id="gcashText" is="iron-input" value="{{gcashInput::input}}">
</paper-input-container>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="confirmClick">Submit</paper-button>
</div>
</div>
...
...
Polymer({
is: "accountability-ticket",
confirmClick: function() {
if (this.gcashInput == null)
{
//show error
this.$.gcashDeco.invalid = true;
}
}
This paper-input-error element is referenced by the id of whatever paper-input-container it is inside of. Setting it's invalid property to true shows the error, and false hides it.
<paper-input-error>Field is empty</paper-input-error>
This next snippet binds the field's input value to a variable this.gcashInput which you can access inside confirmClick or any other method.
{{gcashInput::input}}
As a final note, getting id's of elements inside of your Polymer element is done like this:
this.$.gcashDeco
Not the way you would with vanilla Javascript:
document.getElementById('gcashDeco');
The latter, vanilla JS way, would search the main DOM, not the Shadow DOM where your element resides. So, use document.getElementById() if you need to search the DOM, and use this.$.elemendId if you need to search your element for an id.
i need to get the value of some paper-input fields inside a paper-dialog after a press on a "ok" paper-button.
I have:
...
<paper-dialog id="notediag" heading="Add Note" transition="paper-dialog-transition-center">
<paper-input id="dialog-add-note-header" label="Header"
value="{{valHeader}}"></paper-input>
<br>
<paper-input id="dialog-add-note-text" label="Text"></paper-input>
<paper-button label="Cancel" dismissive></paper-button>
<paper-button label="Ok" affirmative default
on-click="{{addNote}}"></paper-button>
</paper-dialog>
...
<script>
Polymer('note-list',{
addNote: function(e, detail, sender)
{
var header=???
console.log("add note "+header);
}
});
</script>
I tried multiple ways to find the values of the paper-input fields but not found a propper way to do it. e.target.templateInstance does not work. A call to document.querySelector('#dialog-add-note-header') results in a null.
Any ideas?
Thanks for you help.
Stefan
{{valHeader}} creates a property inside your note-list elelemt which is bound to the input value of the paper-input.
You can access it with
var header = this.valHeader
document.querySelector('#dialog-add-note-header') doesn't work, because the paper-input element is inside the shadow DOM of the paper-dialog. But you can use Polymer's node finding utility this.$.dialogAddNoteHeader (rename your id attribute to contain no dashes) to access the input element directly.