Develop Reference

disable a textarea with angularjs

I am trying to disable a textarea from handling a keyboard event when ever a user presses the enter key of the keyboard when the textarea is empty using angularjs. I have been able to disable the submit button when the textarea is empty but I am trying to disable the textarea when from enter event when the textarea is empty.
This is my attempt:
<div class="descriptionarea">
<textarea ng-model="trackTxt" id="input" ></textarea>
<span class="buttonfortxtarea">
<button ng-disabled="!trackTxt" class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
</div>
When I hit enter from my textarea it triggers event using the following code
document.getElementById('input').addEventListener('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { // enter key press
send();
}
});
The above code works whether the textarea is empty or not.
EDITTED:
In my app.js of angularjs
app.controller('TodoCtrl',function($scope){
//handle javascript enter event on key up
// function TodoCtrl($scope) {
$scope.trackTxt;
$scope.send = function($event){
alert('TEST');
}
$scope.isEmpty = function(param){
return param.trim().length === 0;
}
//}
});
In jsp file
<div ng-controller="TodoCtrl">
<textarea ng-keyup="$event.keyCode == 13 && !isEmpty(trackTxt) && send($event)" ng-model="trackTxt" id="input" ></textarea>
<span class="buttonfortxtarea">
<button ng-disabled="!trackTxt" ng-click="send($event)" class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
</div></div>
Please how can I use angularjs to prevent the enter event from happening when ever the text-area is empty.

You can use ng-keyup for attaching an function on enter key press,
ng-keyup="$event.keyCode == 13 && functionToCall()"
Here is demo,
Thanks

You could simply check if it's empty...
document.getElementById('input').addEventListener('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13 && $(this).val() != "") { // enter key press
send();
}
});
This also may work:
document.getElementById('input').addEventListener('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13 && $(this).val().length <= 0) { // enter key press
send();
}
});
To prevent the default enter use preventDefault() Event Method
document.getElementById('input').addEventListener('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13 && $(this).val().length <= 0) { // enter key press
e.preventDefault(); //This avoid the enter...
}
});
How about the sendChat()...
document.getElementById('input').addEventListener('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13 && $(this).val().length <= 0) { // enter key press
e.preventDefault(); //This avoid the enter...
}
else if(code == 13 && $(this).val().length > 0) {
sendChat();
}
});

Dynamic numeric form control issue

I add form using jquery append method and this method has .numerik_kontrol class but this functions working are another form but it's not working on my dynamic form
my function;
$(document).ready(function(){
/** numerik kontrol*/
$(".numerik_kontrol").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
/** numerik kontrol bitiş*/
/** select seçim*/
$(".btn_ekle").on("click", function(e) {
var ekle = $(".ekle").html();
$(".add_after").append(ekle).show();
e.preventDefault();
});
$(document).on('change', '.havale_tipi', function() {
var value = $(this).val(),
parent = $(this).closest(".group");
if (value == "iban_no") {
$(".hesaba_form", parent).fadeOut();
$(".iban_no_form", parent).fadeIn();
} else {
$(".iban_no_form", parent).fadeOut();
$(".hesaba_form", parent).fadeIn();
}
});
$(document).on("click", ".iade_sil", function() {
var form_sil;
var form_sil = confirm("Formu silmek istediğinize emin misiniz ?");
if (form_sil == true) {
$(this).closest(".group").remove();
} else {
return false;
}
});
document.getElementById('iade_miktari').className="numerik_kontrol";
});
if you wanna check out full click this link - demo page
if you click bottom of the form button(left button) you gonna see dynamic forms

In your $(document).ready use a $(document).on event handler instead of a keydown handler on existing numerik_kontrol elements. This will bind the handler to the document and evaluate the selector when every keydown event occurs, instead of directly binding the handler to the result of the single selector evaluation in $(document).ready
i.e.
instead of:
$(".numerik_kontrol"),keydown(function(e) { ...
try something more like this:
$document.on("keydown", ".numerik_kontrol", function(e) { ...

Prevent backspace from navigating back in AngularJS

I faced this issue in my AngularJS webapp.
When a user enters a page with a form to fill and he starts typing, if he presses the backspace key and the focus is not on the input text, then the page goes to the previous state.
I looked up this solution using jQuery, but it doesn't seem the appropiate way for achieve this in AngularJS.

There is $document in angular js:
angular.module('yourModule', [])
.controller('yourController', ['$scope', '$document', function($scope, $document) {
$document.on('keydown', function(e){
if(e.which === 8 && ( e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT" ) ){ // you can add others here inside brackets.
e.preventDefault();
}
});
}
]);
Plnkr Demo.
You can see in the demo i have used only for "INPUT" nodeName and it does not prevent the default of the backspace key on text input but not on textarea because we have not handled it in the condition.

I can't comment "accepted answer", but it will work not right, as condition
e.which === 8 && e.target.nodeName !== "INPUT" || e.target.nodeName !== "SELECT"
with logic error, so you can use
e.which === 8 && e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT"
or answer that wrote #ThisIsMarkSantiago.

Add the below script in your controller
var rx = /INPUT|SELECT|TEXTAREA/i;
$document.on("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
Or you can use Jquery
$(function(){
var regx = /INPUT|SELECT|TEXTAREA/i;
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!regx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
});

I got this answer here:
How can I disabling backspace key press on all browsers?
$(document).keydown(function(e) {
var nodeName = e.target.nodeName.toLowerCase();
if (e.which === 8) {
if ((nodeName === 'input' && e.target.type === 'text') ||
nodeName === 'textarea') {
// do nothing
} else {
e.preventDefault();
}
}
});
Just put it inside your controller.

Know if input is in use and disable the hotkey (Jquery)

I use some hotkeys on my website, but when the user is inside the search form or inside comment. I want to disable them.
What the best for me to do it? Thanks
Example of my hotkey:
$(document).keydown(function(e)
{
if (e.which == 40 || e.which == 74) // next post
{
return scroll('next');
}
if (e.which == 38 || e.which == 75) // prev post
{
return scroll('prev');
}
});

You can check for the event.target element. If that element is from type INPUT you might want to omit the handler code. Could look like
$(document).keydown(function(e)
{
if( e.target.nodeName !== 'INPUT' ) {
if (e.which == 40 || e.which == 74) // next post
{
return scroll('next');
}
if (e.which == 38 || e.which == 75) // prev post
{
return scroll('prev');
}
}
});

You could check if e.target.nodeName === INPUT (the event is triggered inside an input field) and act accordingly

disable enter key on page, but NOT in textarea

Found this script:
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
Only issue, it also stops enter key being used in textarea. Which is a hassle.
I have toyed with using:
onkeypress="return handleEnter(this, event)"
But our forms are extremely complex, and I am looking for a cleaner way of doing things.

You need to check the nodeName or tagName of the event target here, like this:
if (evt.keyCode == 13 && node.nodeName != "TEXTAREA") { return false; }
I noticed after this was accepted that you are already using jQuery, you can just replace all your code above with this:
$(document).keypress(function (e) {
if(e.which == 13 && e.target.nodeName != "TEXTAREA") return false;
});

I think you can just change this line
if (evt.keyCode == 13 && node.type == "text") {
return false;
}
to
if (evt.keyCode == 13 && node.type != "TEXTAREA") {
return false;
}

If you use jquery (highly recommended) then this will automatically add the function to allow use of the enter key:
$("textarea").focus(function () {
$(this).keypress(handleEnter);
});