Storing empty string leads to &nbsp in Android

help
1

I have been learning Meteor making a fairly simple todo app. Everything is running smoothly but I ran into an interesting bug.

When I try to store an empty string into the database by hitting the Enter key it works just fine in a browser, but in Android it adds the &nbsp.

  var thisComment = event.target.innerHTML;
  
  if (thisComment === "") {
    topsixDB.update({_id: valId}, {$set: {comment: "Add details..."}});
  } else {
    event.target.innerHTML = "";
    topsixDB.update({_id: valId}, {$set: {comment: thisComment}});
  }

Figured out that hitting enter adds in the non-breaking space, but how do I get rid of it before I store it in the database?

2

I think it is better to use event.target.value rather than innerHTML - that might solve the problem immediately. Also, is this a textarea or an input?

3

Ahh! I forgot to include that. Probably pretty important to mention that it is an contenteditable div. The reason being I wanted the text container to resize automatically according to the length of the text. It seemed kind of complicated to do it with a textarea, and the text input only shows a single line. Hence why the use of innerHTML.

4

There’s your problem :stuck_out_tongue:

No but in all seriousness the behaviour of contenteditable is dramatically different across browsers, as anyone who has tried developing a complex editor on top of it can tell you. I’d say you basically just need browser-specific workarounds for these issues.

Your other two options are:

  1. Use textarea (there are many plugins out there for auto-resizing them, and they are pretty standard)
  2. Find a pre-packaged editor you can just drop in which has solved all of these problems for you
5

To second what @sashko said – contenteditable is probably not worth your time. If you need an input with truly editable content, I’d check out something like froala, which actually has a few packages that make getting things running pretty quickly.

In all honesty, though, if your only concern is the aesthetics of your input, I’d rather spend my time making a textarea look good than worrying about contenteditable, editors, etc…

1 Like
6

Thanks for the feedback. Still fairly new to development as a whole, so I wanted to stick with basic javascript and html as much as possible. Haven’t really used plugins yet, but I guess it’s something I can’t avoid. Kind of wished the text areas just auto-resize by default!

1 Like
7

I used the jquery autosize plugin in this app:

See it in action here: http://tinyvote.meteor.com/

8

I saw this when I first looked around at textareas. To be able to use the .autosize method do I just include the js files in my project? Still new to the plugin thing so I’m not entirely sure. Looked up npm and that was even more confusing haha!

9

Yeah sure, you can just download the JS file and put it in your project. You can also install from Atmosphere: https://atmospherejs.com/copleykj/jquery-autosize

It’s as easy as typing meteor add copleykj:jquery-autosize in your project directory, I wouldn’t be worried about using some external packages!

10

Hey @sashko I finally got around to adding the package and it works pretty well! Still have to learn how to integrate these kind of things in eventually but the code you provided definitely worked.

One thing that bugs me though is that the textarea has a blank line underneath. I want the height to fit just the text and not have the extra space under it. Is there someway I can change that?

Edit: Never mind. I searched the autosize and I can set the row = 1. Thanks for the help Sashko!

1 Like