i am new in vue js. i have a text-area for chatting. when courser is in the text area how can i call a method.
here is my code:
<template>
<div class="composer">
<textarea v-model="Keijiban" #keydown.enter="send" #click="selectContact(kokyaku1)" #keydown="selectContact(kokyaku1)" placeholder="ここにメッセージを入力してください。"></textarea>
</div>
</template>
this is my method
selectContact(kokyaku1) {
this.$emit('readkorsi',kokyaku1);
}
how can i call "selectContact(kokyaku1)" method when courser is in text-area
The focus event is triggered when the user selects the textinput and it gains focus.
The blur event is triggered when the user selects anywhere outside of the textarea and it loses focus (blurs).
Use the focus and blur blur events as needed. You may want to remove your keydown listener if you are already listening for the focus event.
<textarea #focus="selectContact(kokyaku1)" #blur="hideContact"></textarea>
Related
Reading the Vue documentation about events, they mention the event modifiers like prevent or stop. They mention that on stop: <!-- the click event's propagation will be stopped -->. I am assuming this will stop the event from bubbling. What about prevent. What does it exactly do? I am assuming it will prevent the event from being triggered twice (on a double click for example). Are these assumptions correct? I just couldn't find more specific info on the web.
What I read:
https://v2.vuejs.org/v2/guide/events.html
How to prevent/stop propagation of default event (click) in directive (vue 2.x)
.prevent or event.preventDefault() – It stops the browsers default behaviour (A example is reload when you hit <button type="submit"> in <form>)
.stop or event.stopPropagation() – It prevents the event from propagating (or “bubbling up”) the DOM
.once - The event will be triggered at most once
Here is a practical example in VueJs 2:
var stopEx = new Vue({
el: '#stop-example',
methods: {
elClick: function(event) {
alert("Click from "+event.target.tagName+"\nCurrent Target: "+event.currentTarget.tagName);
}
}
})
#stop-example > div {
max-width: 300px;
min-height: 150px;
border: 2px solid black;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="stop-example">
<h3>without stop propagation</h3>
<div #click="elClick($event)">
<button #click="elClick($event)">Click Me</button>
</div>
<h3>with stop propagation</h3>
<div #click="elClick($event)">
<button #click.stop="elClick($event)">Click Me</button>
</div>
</div>
Here is how it works
On the first div element, (click) event for (div) element is handled by (div) and by the children of (div) because we did not stop propagation.
So once you click on button, the click event for button is triggered first then bubbling is done by moving on the ancestors of button.
The target is the element that handles the event while the currentTarget may be element that handles the event or ancestors of the element.
For this reason when you click on button on the first (div), the click event triggers twice due to handling click event of the parent.
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
I have a simple button that has an action.
<button {{action "slide" target="view"}} class="slide up">Slide up</button>
Make that two,
<button {{action "slide" target="view"}} class="slide left">Slide down</button>
Both of these have the same action that is handled by the containing view, something like this:
App.ViewName = Ember.View.extend({
actions:{
slide: function(){
console.log("which button triggered the slide action?");
}
}
});
In the above piece of code, my console log states my quandary. I am not sure how I can identify which button {the Slide Up OR the Slide Down} triggered the slide action.
I mean, this is basic straightforward stuff in jQuery where you can simply use the 'event' to determine the calling button. But in Ember, all these concepts seem to desert me.
honestly I'd make it two different actions, but you can send a value to the action
{{action slide "up"}}
slide: function(type){
console.log(type);
}
I have written a script that saves the textarea value automatically onchange event of the textarea. The issue I am facing is when user types something and suddenly stop then the onchange doesn't trigger until the user clicks elsewhere on the screen. Isn't it possible to make my script work in a way that when the user stops typing on textarea:
<textarea onchange="onautosave()" id="autosave" ></textarea> lets say for five seconds then the function onautosave() gets triggered? Kindly let me now how can I do it. Thanks
You can use onkeyup event and setTimeout() to trigger auto save. Here is the code (just to sketch the whole thing)
HTML
<textarea onkeyup="autosave()" id="autosave" ></textarea>
JS
var autosave_timer = null;
function save() {
// actual save code
}
function autosave() {
if(autosave_timer)
clearTimeout(autosave_timer);
autosave_timer = setTimeout(save, 5000);
}
Please note cleating timeout. It helps not to overwhelm server.
I need to create a jQuery App with 30 buttons, from 1 to 30, whereby each one calls the exact same action script via Ajax where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).
For example, let's say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data from process.php?btn=27.
Which type of button should I use for this: <input> buttons, <a> buttons, <button> buttons, or something else? And why do you suggest that?
Also, how would Ajax get the corresponding value (1-30) of the button pressed with the method you suggest?
Thanks!
I would suggest to use <a/> that way if JavaScript is disabled you can maintain the application's functionality.
Button 3
And the script would simply use the href to post to your page.
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
Update
Since JavaScript is required than my recommendation would depend on your application design. If you want the big buttons to look like buttons simply use <input type="button" value="3"/> As by default they will have hover effect, depressed effect built out of the box.
If your buttons do not look like normal buttons maybe just blocks or some other style a <div/> could also be an option. The one downside to using an <a/> would be you always have to suppress the default behavior of the click()
Each will work fine. But the <a> you can style with an image while <input> and <button> you cannot (the browser decides on the look).
Simply bind the click event on the button. Assuming you have this HTML:
Button 1
Button 2
...
Button 3
Here's the Javascript. The trick is to call the AJAX here, and return false to prevent the Browser from changing page.
$('a').click(function(e) {
$.get($(this).attr('href'), function(result) {
alert('AJAX result = '+result);
});
return false;
});
You could create a custom attribute on each button.
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
In your javascript
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
By doing this you can add additional attributes to extend the data stored in each button and it also makes chaning the AJAX target link very easy since it's centralised, rather than spread around multiple anchor tags.
As an alternative to Marks answer, you could use a <form> element, and have each button a submit button; either a input or button. Set the name of the element to "btn" and the value of the element to the button number.
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
The jQuery would look something like:
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
If you want the submission to be a POST request, this would most likely be better. For a GET request however, Marks will probably be easier.