Develop Reference

Trigger the textarea message when clicking on href link

I am trying to customize intercom plugin on a wordpress website.
I need to trigger a message when clicking on a href link, (so simulate enter key on the textarea).
This is code used:
jQuery('body').on('click', '.start-chat-btn-advice', function () {
var e = jQuery.Event("keydown");
e.which = 13;
jQuery("textarea").trigger(e);
});

Sounds like you need
<form action="chat" id="form1">
<div id="container">
<textarea id="chatText"></text>
Click
</div>
</form>
$(function() {
$("#container").on("click",".start-chat-btn-advice",submitIt);
$("#chatText").on("keydown",function(e) {
if (e.which==13) submitIt()
});
});

How to go to next textbox when enter is pressed?

Hi guys I'm learning Javascript and I would like to ask you guys how can I go to the next textbox after inputing text when I press the enter button in the keyboard. thank you

You can use .keyup() to keep track of when user finish key in a character and e.keyCode to get which key was pressed, if it's 13(means enter) then use .focus() to focus the next textbox element:
$('input[type="textbox"]').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
Fiddle Demo

Try this code :
$('#inputform').on('keydown', 'input', function (event) {
if (event.which == 13) {
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
}
});
Help Link

I've developed a plugin to include enter event.
(function ($) {
$.fn.enter = function (func) {
this.bind('keypress', function (e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);
You can call it like this:
$('#input1').enter(function(){ $(this).next().focus(); });

You can go to the next field in many ways, as demonstrated by all the answers here, but don't forget to assign the order of what is actually NEXT as well. You can go from field to field with the TAB button, and the layout of your site may not always go in the order you'd expect or want. The solution to this is to add tabindex="" to your fields as such:
<input type="text" tabindex="1" />
<input type="password" tabindex="2" />
<input type="submit" value="Log In" tabindex="3" />

jQuery keyup should should trigger enter key

I have a simple problem (hopefully), but I am unable to find a clear solution.
I have a datatable, which has a text input field. The user enters text into the text field, and hits the enter key. This automatically filters from the text entered.
I was hoping to use the onkeyup event to trigger so when a user enters a value in the text field, the datatable automatically updates, rather than the user having to press enter.
<input type="text" name="input" class="filter" id="input" onkeyup="functionName(this)" value="">
<script>
function functionName(e) {
alert(e.value);
}
</script>
This code works, so when I enter a value, it pops an alert up displaying the entered value.
Is it possible i can change the alert, to do a submit, or replicate what the "enter" key does.
From trying to find a solution, it is more difficult because it is not a form, as it uses ajax so the .submit methods will not work.
I was also hoping a solution like this could work
<script>
var e = jQuery.Event("keyup");
e.which = 13; // Enter
$("#input").trigger(e);
</script>
I know there are many similar topics, and I have looked, but none of them seem to be the right solution for me.
Thanks for the help.
//
Edit
//
Based on the keyup issue, how can I refocus cursor after filtering. Is this done at the same time as filtering?
$obj.find('input.filter').on('keyup',function(e){
e.preventDefault();
ajax($obj);
});

You're using jQuery, so there's no real need to use onclick="", Secondly try to avoid to use reserved names for IDs & Classes (e.g. #input). Lastly, you can mimic the form submission by using $.post() on each .keyup event like below:
<input type="text" name="input" class="filter" id="searchinput" value="" />
<script>
$(document).ready(function() {
$(document).on('keyup', '.filter', function( event ) {
$.post( 'yourapi.php', { input: $(this).val() }, function( data ) {
//Refocus the <input />
$('#searchinput').focus();
});
});
});
</script>

As you can code in jquery too. Then you can go with this code......
$(document).ready(function(){
$(".filter").keyup(function(){
var text_input_text = $(this).val();
//here is your ajax post request
$.post('url for post', {filter_text: text_input_text}, function(response){
console.log(response);
});
});
});
Here we have covered the keyup event and ajax post.
Hope this will help you.

$(document).ready(function(){
$("input").keyup(function(event)
{
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode != '13')
{
var e = jQuery.Event("keyup");
e.which = 13; // Enter
$("input").trigger(e);
}
else {alert("Enter triggered");
}
});
});
DEMO JSFiddle

How to prevent user pasting text in a textbox?

I have this JS function that prevents user from typing characters
<script type="text/javascript">
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if(!regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
</script>
<span>Radio Receive:</span>
<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="${cpCon.receiveNo}" required tabindex="34" />
But I noticed that when the user tried to paste a word from this textbox, the text can be entered. How can I prevent this without disabling the paste?

Very Easy Solution:
<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="${cpCon.receiveNo}" required tabindex="34" onCopy="return false" onDrag="return false" onDrop="return false" onPaste="return false" autocomplete=off />
This worked for me very well. No one can paste now into your textbox using right button paste option of mouse or pressing ctrl+v from the keyboard.

// To Disable the paste functionality
$(document).ready(function(){
$('#txtInput').bind("paste",function(e) {
e.preventDefault();
});
});
// Below One might be helpful for your functionality.
$(document).ready(function(){
$('#txtInput').bind("paste",function(e) {
validate(e);
});
});
or
OnTabOut() or onblur() you can validate the entered / pasted text instead of handling the paste functionality.

I tried this in my Angular project and it worked fine without jQuery.
<input type='text' ng-paste='preventPaste($event)'>
And in script part:
$scope.preventPaste = function(e){
e.preventDefault();
return false;
};
In non angular project, use 'onPaste' instead of 'ng-paste' and 'event' instead of '$event'.

If you simply need non editable kendoComboBox(), you could use kendoDropDownList() instead.
In my case i needed it to be enabled/disabled depending on user privileges,
so here's the solution i came up with (this prevents key inputs and pasting values) :
if (user.hasRight()) {
var myinput = $("#myinput").data("kendoComboBox");
myinput.input.on("keydown", function (e) { e.preventDefault(); });
myinput.input.bind("paste", function (e) { e.preventDefault(); });
}
You can test it here

VanillaJS solution
function pasteNotAllowFunc(xid){
let myInput = document.getElementById(xid);
myInput.onpaste = (e) => e.preventDefault();
}
pasteNotAllowFunc('pasteInput')
Paste
<input id="pasteInput" value="paste not allow"/>
<hr/>
Textarea
<textarea id="test" value="Copy me and try to paste"></textarea>

jQuery:
$(this).click(function () {
$(".txtbox").attr("disabled", "disabled");
});
or css:
.txtbox{
display: none;
visibility: hidden;
}
or html attribute:
set disabled="disabled";

Key press event not working in fire fox for a textbox in js

I am pasting my sample code here i am trying to detect enter key on key press but it keep giving error in FF that e is undefined.
$(document).ready(function() {
$('#txtDescript').keypress(function(e) {
clearDescription(e)
});
});
My markup
<input type="text" style="width: 350px; height: 50px;" id="txtDescript" value="Enter Description"class="TextBox" onclick="clearDescription();"
onblur="blurDescription();" />
this is the function
function clearDescription(e) {
debugger
var KeyID = (window.event) ? event.keyCode : e.keyCode;
var keyPress = checkBrowser(e);
if (keyPress == 13) {
setDescription();
}
}
Any solutions for it

Here:
onclick="clearDescription();"
you are not passing any argument to the clearDescription function which expects an e argument. Also because you are using jquery I don't really understand why you are mixing markup and javascript. Wouldn't it be better like this:
<input type="text" style="width: 350px; height: 50px;" id="txtDescript" value="Enter Description" class="TextBox" />
and then:
$(function() {
$('#txtDescript').keypress(function(e) {
clearDescription(e);
}).click(function(e) {
clearDescription(e);
}).blur(function(e) {
// As you haven't shown how the blurDescription
// function look like you might want to check the arguments
blurDescription(e);
});
});
which could also be written like this:
$(function() {
$('#txtDescript')
.keypress(clearDescription)
.click(clearDescription)
.blur(blurDescription);
});
All this being said, you could also take a look at the jquery watermark plugin which provides similar functionality to what I suspect you are trying to implement.