How to restrict user from entering # & . in the label while content editable is true?

Question

Using Bootstrap form builder, I want to know how I can restrict user from entering # and . into the property of a label, where contenteditable is true.

I want this to be implemented for any random label that is going to be edited. How to do that?

I am aware of the ascii values for that but for all the labels present in that page when content editable is true i want user not to input # and . into it.

My label sample is this:

<label>
    <strong contenteditable="true">Telephone</strong>
</label>

I tried using this but does not prevent it from typing # & .

$('body').on('paste input', '[contenteditable]', function(data) {
var text = $(this).text();
    if (text == '#' || text == '.'){
        console.log('hi');
    data.preventDefault();
} 
});

working now

$('body').on('paste input', '[contenteditable]', function(data) {
var text = $(this).text();
var regax1 = /#/;
var regax2 = /./;
if (text.match(regax1)) {
   var newText = text.replace('#', '');
   $('strong').text(newText);
        }
    });
});

See this [topic](http://stackoverflow.com/questions/1391278/contenteditable-change-events) — doldt, Apr 28 '15 at 12:30
thanks for the response but this is for the specific field input. In my case there are unknown number of labels depending upon user drag & drop. For all the labels this should be applied how to do it... — Shaggie, Apr 28 '15 at 12:34
that link describes a general method for attaching event listeners while using the contendEditable attribute. You can use that to listen on any elements - a specific field input, if need be. Am I missing something? — doldt, Apr 28 '15 at 12:56

score 0 · Answer 1 · answered Apr 28 '15 at 12:39

0

I don't know bootstrap form builder but you can do this easily using onkeyup event on every input.

When user press a key, look keycode and if you don't like this key, remove the last character. Or on every onkeyup use regexp to replace bad character.

answered Apr 28 '15 at 12:39

Morgan Denis

1
3

Maybe `preg_replace()`, because the user might copy a word containing the forbidden characters, and the script would not detect them. – Ciprian Apr 28 '15 at 13:23

Ciprian · Accepted Answer · 2015-04-28T13:59:03.010

0

There you go:

jQuery(document).ready(function($) {
    $('body').on('paste input', '[contenteditable]', function(data) {
        var text = $(this).text();

        if(text.match(/#/g).length > 0) {
            var newText = text.replace('#', '');
            $('strong').text(newText);
        } 
    });
});

Here's a pen: http://codepen.io/ciprian/pen/BNyqbv

edited Apr 28 '15 at 13:59

answered Apr 28 '15 at 13:41

Ciprian

872
1
10
30

It is showing me type error: TypeError: text.match(...) is null – Shaggie Apr 28 '15 at 13:44
ya it is working but when i copied that one in my application is showed me this error on my console – Shaggie Apr 28 '15 at 13:50
Is it showing you that error when you type '#' or when you type any character? – Ciprian Apr 28 '15 at 13:58
but what if i also need to disable the dot character. I tried for dot but it is working unexpected after that... – Shaggie Apr 28 '15 at 14:05
That's great. Make sure you use a class for `strong`, unless you want all `strong` elements to work like this. – Ciprian Apr 28 '15 at 14:05
You are right, the dot matches any element. Try `\.` – Ciprian Apr 28 '15 at 14:07
Yes. `var regax2 = "/\./";` – Ciprian Apr 28 '15 at 14:09

How to restrict user from entering # & . in the label while content editable is true?

2 Answers2