hi in my webpage i am saving textarea contents on pressing enter button . it is saving but what happens is mouse-cursor moves to next line . it always saves with a newline character . i just want to avoid the mouse-cursor moving to next line and just save it . for saving it i use event.keycode kind of stuff for the textarea and then save it
$('.text_desc_cls').keyup(function(event){save_text_val(event,this.id);});
function save_text_val(event,this_id){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
req_id = '#'+this_id;
textarea_val = $(req_id).val();
$.post("./funcs.php?func=save_int_text_val",{textarea_val:textarea_val},function(data){
alert('done');
}
}}
The easiest solution would be to grab the value on keydown - that will give you the value without the latest entry. It will show the newline in the textarea, so if you need that removed, you could switch to keyup rather than keydown and do a replace like so:
$(req_id).val($(req_id).val().replace(/\n/,''));
Related
When you a have a textarea containing single character '\n' the textarea won't fire an input event upon deleting that character. In my case where I want to update a counter with number of remaining characters this behavior causes the counter to display wrong information.
Live demo https://jsfiddle.net/k594e6rt/5/
html:
<label>Go into this textarea to the last row and press backspace. It won't trigger the input event despite deleting a char. This demonstrates a bug in the Edge browser.</label><br/>
<textarea id="bug" rows="3"></textarea><br/>
<label>Log:</label><br/>
<div id="log">---<br/></div>
js:
/* setup */
var bug = document.getElementById('bug');
var problematicText = String.fromCodePoint(10); //newline
bug.value = problematicText
/* debugging setup */
var counter = 1;
var log = document.getElementById('log');
var logEvent = function logEvent(){
log.innerHTML += (counter++ + ': input fired! <br/>');
}
bug.addEventListener('input', logEvent)
Edit: Edge version: 13.10586.
So the issue might have been already fixed in recent version.
Edit 2: It's fixed in Edge 14.14393.
bug.addEventListener('keyup', logEvent)
keyup instead of input worked fine in my version of edge. And I suppose it should work in every browser. Except stuff like right click paste. So its still not solving all your problems.
https://jsfiddle.net/cjztogvh/
For reference, EDGE version I have is 38.14393.0.0
It has been fixed in Edge 14.14393.
I have several link_to tags on an ERB page styled as buttons with Bootstrap (btn class). How can I bind the Enter key to one of them?
I'm assuming that when you say "bind the Enter key to one of them" you mean "When the user presses Enter, they follow the link of my choice."
To accomplish this, I would put an id on the link tag you want to follow. For my example below, I will use #follow-me
Then, you're gonna need to use Javascript. Assuming you're using jQuery, something like this:
var ENTER = 13; //This is the js keycode for ENTER
function my_custom_keypress(e){
key = e.which;
if(key == ENTER){
var my_target_url = $('a#follow-me').attr('href'); //Figures out where your link goes...
window.location = my_target_url(); //...and sends the user to that URL.
}
}
$(document).on('keydown', my_custom_keypress); //when user presses a key, triggers our fxn
If you'd actually like to trigger a click event on your target link rather than forcibly linking the user, you can slightly modify the code as follows (again, this requires jQuery):
var ENTER = 13; //This is the js keycode for ENTER
function my_custom_keypress(e){
key = e.which;
if(key == ENTER){
$('a#follow-me').trigger('click');
}
}
$(document).on('keydown', my_custom_keypress); //when user presses a key, triggers our fxn
That should do it, and good luck!
I use with the event "okCancelEvents" for validating my form in meteor.
But now, I want to use a textarea. The event "ok" don't work :(
Have you an idea of event with meteor for validate textarea ? :)
Thanks
I assume you're referring to the okCancelEvents function written in the Meteor Todos example, per this SO question. This function is designed to handle the events for an <input>, which is why its trigger for "ok/submit" is the user pressing enter (or blurring the <input>). See lines 59-61:
} else if (evt.type === "keyup" && evt.which === 13 ||
evt.type === "focusout") {
// blur/return/enter = ok/submit if non-empty
This won't work for a <textarea> because as a multiline input a <textarea> accepts enter presses because that's how a user types a new line. Submitting the form based on an enter press would be surprising to your users, to put it mildly. The focusout trigger should still work fine, however.
I was wondering if there is a way to get the current value of a on the keydown or the keypress event. To define "current value" in a better way, I mean, by this, the value of the textarea, including the "just inserted" character. By default on these events the value does not change. If this is not possible i would like to know if there is a cross browser way to get the just inserted value of the key that I pressed (I don't need the keycode, because e.g. this does not define, supposing that I enter a characterm if the character entered is Uppercase or Lowercase).
You'll have to wait for the keyup event to fire before the actual value changes.
Otherwise, for keydown or keypress, you have to map the character code on the event (and this is different per browser unless you use some JS library like jQuery which standardizes it) and determine the cursor position and modify the value that way. This can get a little tricky especially around browser support unless you use a JS library to do this.
I wrote a module that translates keypress, keydown, and keyup events into characters and keys respectively. https://github.com/fresheneesz/keysight
Example:
textarea.addEventListener("keydown", function(event) {
var character = keysight(event).char
if(character === 'w') {
console.log("got lower case w")
} else if(character === 'W') {
console.log("got upper case w")
}
})
Morning - I'm having a little problem.
I have an autocomplete extender textbox where a user types in words and suggestions are provide. Should the term be rather generic, a list appears and the user can scroll up or down using the mouse wheel with no problems at all.
However, if the user attempts to click on the scroll bar and scroll through the list, it fires the textchanged event - which I don't want it to do.
This event should only fire once the user has actually selected the appropriate product from the list supplied.
I can set the autopost back of the text file off which has the desired effect but I do require the post back to be performed once the user selects a suggestion.
Does anyone know how I can get around this?
I managed to find a resolution.
Stick this in the page load event:
string contactPostBackFunction = null;
contactPostBackFunction = Page.ClientScript.GetPostBackEventReference(this.tbxProdAC, "", false);
string contactPostBackScript = null;
contactPostBackScript = string.Format("function postBackOnContactSelectedFromDropDown() {0} {1} {2}", "{", contactPostBackFunction, "}");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "contactPostBackScript", contactPostBackScript, true);
And have this in your Autocomplete extender properties:
OnClientItemSelected="postBackOnContactSelectedFromDropDown"