I have a textarea that triggers a function whenever the space key is pressed, that function checks if the last "bit" of text entered is an url or not and if it is it creates a preview underneath and deletes the "bit" of text from the input, that works fine, but now I want too that function to be triggered whenever the user paste something into it, the problem is that the input is linked with v-model to post.description in the data, but when #paste calls the function the data post.description is empty but when the same function is triggered by pressing the space key that data is filled...
this is the html:
<div id="post-share" class="form-group">
<textarea
id="post-description"
class="form-control"
name="post-description"
cols="40"
rows="5"
#keyup.space="checkUrl"
#paste="checkUrl"
v-model="post.description"
></textarea>
and this is the function:
checkUrl() {
if (this.post.video_link === "") {
console.log("entro 1");
let link = [];
const regex = /((?:https?:|www\.)[^\s]+)/g;
let url = this.post.description.match(regex);
console.log(this.post.description);
if (url) {
console.log("entro 2");
url.forEach((match, groupIndex) => {
link = match.split("=");
this.$set(this.post, "video_link", link[1]);
this.is_there_url = true;
this.post.description = this.post.description.replace(match, "");
});
}
}
}
so it does not meet the condition if (url) as this.post.description is empty... any hint why is only empty when trigerred by #paste and not when pressing space?
I'm not sure but maybe the #paste event is triggered before binding the value to post.description.
Try using a watcher instead
<textarea
id="post-description"
class="form-control"
name="post-description"
cols="40"
rows="5"
v-model="post.description"
></textarea>
and then in the script section add
computed:{
postDescription(){
return this.post.description
}
},
watch: {
postDescription() {
this.checkUrl()
}
}
I don't know the model you are trying to achieve but you have to add conditions on the watcher to prevent the execution of the method on every new character added to improve the performance.
Related
What is the wrong with this code? I got the exactly mobile number on the console but not on query routing on /search_user?mob ?
<input type="tel" name="message" id="mobile_input" value="">
<!--getting mobile no. from the input tag -->
<script type="text/javascript" defer>
e => {
e.preventDefault();
var mobInput = document.querySelector('#mobile_input');//get the input tag.
var moby = mobInput.value;//get mobile no.
console.log(moby);//be sure from the variable mob
mobInput.value='';//reset the input tag.
return moby;
}
</script>
<!-- query routing on /search_user?mob -->
Search
I tried something like this and this seems to work.
<form>
<input type="tel" name="message" id="mobile_input">
<button type="submit" onclick="handleSearch(document.getElementById('mobile_input').value)">Search</button>
</form>
<!--getting mobile no. from the input tag -->
<script type="text/javascript" defer>
// const handleChange = (value) => {
// var mobInput = value
// console.log(mobInput)
//
// }
const handleSearch = (input) => {
var searchValue = input;
console.log("This is the search value " + searchValue)
var url = '/search_user?mob=' + searchValue;
console.log(url)
window.location.href = url;
}
</script>
Explanation: I changed the a href element for a button element. Every time the button is clicked (onclick) the function handleSearch is called. This function takes as input the value of the input element with ID "mobile_input". Of course, you can clean up the function a bit more. After merging the url basis ('/search_user?mob=') with the input value (searchValue), the handleSearch function should redirect to the url (calling window.location.href). This last one you can of course change for the correct call to the server. Hope this helps.
Side note: you will see that there is a commented-out handleChange function. You could call this function in the input element to keep track of your changes in the console. this function is called using onChange, just like you use onClick with the search button.
For more info:https://www.w3schools.com/jsref/event_onchange.asp
Example:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
<script>
//display whatever is in the textbox in a text span below it
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', () => {
document.getElementById("coolButton").click();
});
</script>
</body>
</html>
When I click the "Click me" button, whatever is currently in the textbox is properly displayed below it.
I want this same behavior to happen automatically when the user pastes into the box. So I add an event listener to the text box listening for a paste.
However, the code inside this paste listener works on what was in the text box before the paste. i.e. if there is "a" in the text box, and the user pastes a "b" into the box, only "a" (and not "ab") will be displayed below.
How do I make the event listener's code take effect after the paste is complete?
I've tried things like forcing it to wait a couple seconds, or displaying in a separate element, but the paste function code always reads what was in the box before the paste instead of after.
How do I make the event listener's code take effect after the paste is complete?
You can use .getData():
The DataTransfer.getData() method retrieves drag data (as a DOMString)
for the specified type. If the drag operation does not include data,
this method returns an empty string.
In order to get the clipboard data you need to use the event parameter to your paste event handler as per documentation.
The snippet:
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
document.getElementById('myText').addEventListener('paste', function(e) {
// get the data from the clipboard.....
var txt = e.clipboardData.getData('text');
// use the data
document.getElementById("enteredBox").innerHTML = txt;
});
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
Or, if you need to get the data after the paste action compteted, you can delay the click event with a .setTimeout(). In this case your code:
document.getElementById("coolButton").click();
becomes:
setTimeout(() => document.getElementById("coolButton").click(), 10)
The snippet:
//display whatever is in the textbox in a text span below it
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', (e) =>
setTimeout(() => document.getElementById("coolButton").click(), 10)
);
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
A last solution can avoid at all the button and it can be based on input event.
The snippet:
document.getElementById('myText').addEventListener('input', function(e) {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
});
<input type="text" id="myText" value="some text">
<br><br>
<span>Entered:</span>
<span id="enteredBox"/>
I need to know how to send a message in my textarea using enter, not only with the submit button.
This is my code.
function onSend () {
const textareaValue = $textarea.value;
if (textareaValue !== '') {
const template = `<div class="conversation-active">
<img src="Foto1.png" alt="Avatar">
<div class="box-message">
<p class="name">Michael Alean</p>
<span class="time-message">${timeNow}</span>
<div class="message">
<p>${textareaValue}</p>
</div>
</div>`;
$chat.innerHTML += template;
$textarea.value = '';
}
}
you can use like this:
firstly declare named pressed function.
this function checks whether the enter key is pressed. if pressed to the enter key will be manually trigger to onSend function.
function pressed(e) {
// Has the enter key been pressed?
if ( (window.event ? event.keyCode : e.which) == 13) {
// If it has been so, manually trigger onSend function
onSend();
}
}
Secondly you should add to textarea props the this code
onkeydown="pressed(event)"
like this:
<textarea name="myTextArea" onkeydown="pressed(event)"></textarea>
The enter key creates linefeeds (LFs) in a textarea so I suspect you're using the wrong type of input field.
Normally, for input type=”text” or input type=”url” you can use the event...
onchange="alert('OK');"
Which does fire when you press the enter key but not in a textarea.
Forcing a textarea to fire with the enter key; although not impossible, is pretty stupid and a sign that you are using the wrong field type.
If you have a form, type some text into it, and press the Enter key, whenever revisiting that form you can double-click on the input box and see the past text submissions.
I have a site that when you press Enter OR click a button, it should take whatever is in the text box and use it for data processing.
This works totally fine when not surrounded by a form but when surrounded by a form an you press the Enter key, it does not act as an enter button push, I believe it's being overridden by the form.
My goal is to have the user be able to press the Enter key as well as click the button to submit the data, but to also remember the text values that were in the text box regardless of which way you submitted the data.
What I have:
<input type="text" id="username-field" class="form-control" placeholder="username">
<input class="btn btn-default" type="button" id="get-name" value="Get Name">
Javascript
$("#get-name").click(function() {
var name = $("#username-field").val();
// ... call other function with name ...
});
$("#get-name").keydown(function(e) {
if (e.which == 13) {
var name = $("#username-field").val();
// ... call other function with name ...
}
");
What I would like to use:
<form>
<input type="text" id="username-field" class="form-control" placeholder="username">
</form>
I tried doing e.preventDefault() when the Enter key is pressed, but this does not remember the text in the input field.
I also considered doing a small cache type thing but am unsure of how I'd go about this.
Any help would be much appreciated!
Thanks!
Doesn't use form at all. Just, why you added it, if you don't use it as intended?
You either mistyped provided code copy-paste, or have errors in yours script (the $("#get-name").val() mistake).
If you want to prevent form from submission, you should e.preventDefault()-it in submission handler, and return false from it:
$('#form-id').submit(function (e) {
e.preventDefault();
// do smth. else here
...
return false;
})
Saving/retriving data with localStorage for HTML5-supporting browsers:
$(function () {
$('form input[type=text]').doubleclick(function () {
var id = $(this).attr("id");
value = localStorage.getItem("form_xxx_" + id);
// do smth. with cached value, ie:
if (value != "")
$(this).val(value); // put in textfield
});
});
$('form').submit(function (e) {
$('form input[type=text]').each(function () {
var id = $(this).attr("id");
localStorage.setItem("form_xxx_" + id, $(this).val());
});
...
// all other work
});
Note: make sure you don't put some user's personal data in browser's local storage -_-
Please could you advise on the following:
I have a registration form, and within that a text area
<form id="register" name="register" method="post" action="register.php">
<textarea rows="5" id="bio" name="bio" method="post">Biographical information</textarea>
</form>
Using java script i have been trying to create an event handler for the onfocus and onblur events so the default text is removed on focus and restored on blur, as follows:
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
i thought by getting the element by id would work, but it doesn't seem to be. no other duplication of names/id exist.
Any help much appreciated.
Thanks guys
Use the placeholder attribute:
<textarea rows="5" id="bio" name="bio" method="post" placeholder="Biographical information"></textarea>
It's working fine, perhaps the issue is that the placeholder default is "Biographical Information" and the script is testing for "All about you". The change that you made as I was posting this is exactly what you needed.
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
http://jsfiddle.net/YeaTQ/1/
My educated guess is that you've placed your code as is right into a <script> tag inside <head> so when the script runs the form has not loaded yet.
Move your <script> below the form or wrap everything with window.onload:
window.onload = function(){
// Code goes here
};
You have two solutions:
In order to not use the javascript code you wrote, Use the following code:
<textarea cols="30" rows="5" id="bio" name="bio" onfocus="this.value = '' " onblur="this.value = 'All about you'">Biographical information</textarea>
I think the javascript code is located before control (in the header I guess), Because of this, the onfocus and onblur properties are not initialized. You'll have to put the script at the end of the document (before the tag).
Also, you script is searching for another text ("All about you") and not the current text that's inside ("Biographical information"). Even if you insert the javascript code at the of the document, the code it will work.