Jan
Jan

Reputation: 31

how to restrict text area that wouldn't allow ONLY blank spaces as input

i was trying to use the .trim()function but it would still allow a whitespace as an input.

TA= $('textarea').trim();

any help is Much appreciated :)

Upvotes: 0

Views: 4892

Answers (3)

Arunprasanth K V
Arunprasanth K V

Reputation: 21941

First of all your question is unclear. i think you are looking for a solution where in your text area white space is not allowded. Then you can use the following method

html

<textarea rows="4" cols="50" id="textarea" >

Javascript

document.getElementById('textarea').addEventListener('keydown', function (e){

  if (e.keyCode == 32) {
      e.returnValue = false;
      return false;
    }

}, false);

DEMO

IF you want to avoid the white space in starting just use trim

var yourstring=document.getElementById('textareaid').value;
    yourstring.trim();

UPDATE

html

<textarea id="text1"></textarea>

javascript

$("#text1").on("keydown", function (e) {
    var len = $("#text1").val().length;
    if(len == 0)
    {
        return e.which !== 32;
    }
    else 
    {
      var pos=$("#text1").getCursorPosition();
         if(pos==0)
       {


           return e.which !== 32;

       }

    }

});

$("#text1").on("keyup", function (e) {
var pos=$("#text1").getCursorPosition();
       if(pos==0)
       {

           var values =$("#text1").val();
            if(values.charAt(0)==' ')
            {
                values=values.trim();
                $("#text1").val(values);
            }
           return e.which !== 32;

       }
});

(function ($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);

check the working DEMO

Upvotes: 0

AkshayP
AkshayP

Reputation: 2159

You could prevent it from being added at all by checking whether the key pressed is the space bar and returning false at first time if so:

  <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript">
          ​$("textarea").on("keydown", function (e) {
          var c = $("textarea").val().length;
          if(c == 0)
              return e.which !== 32;
          });​​​​​
 </script>

Working Example

Upvotes: 2

Md. Yusuf
Md. Yusuf

Reputation: 522

Try with keyup event

 $("#text-area").keyup(function(e){

    if(this.value.match(" ")){
        this.value = this.value.replace(" ", "");
    }

});

It will remove the space when u type space on that textarea.

As your requirement try this one with change event

 $("#text-area").change(function(e){
        this.value = this.value.trim();
});

Upvotes: 1

Related Questions