javascript - Updating contenteditable DIV with spaces - Stack Overflow

admin管理员组

文章数量:1289635

I have a web page that has a DIV on it. This DIV is marked as contenteditable. I need the DIV to be "inline". I also need it to be a minimum size. Since inline elements can't have a min-width, I'm trying to fake it by using a string of  .

Basically, as a user types, I want to add or remove &nbsp elements unless the string is longer than the minimum size. My problem is, when rendered, it seems that every-other   element is rendered as a space. This throws my math off. I'm not sure why this is happening. I've created a Fiddle here. The JavaScript for this looks like this:

function onKeyDown(elem, spaceCount) {
  var space = ' ';
  var spacesToAdd = '';
  var addSpaceCount = 0;

  var d = document.getElementById('debug');


  var spaceIndex = elem.innerHTML.indexOf(space);
  if (spaceIndex !== -1) {
    addSpaceCount = (elem.innerHTML.length - spaceIndex) / (space.length);
    d.value += 'text: ' + elem.innerHTML + '\n';
    d.value += 'len: ' + elem.innerHTML.length + ' index: ' + spaceIndex + ' count: ' + addSpaceCount + ' original: ' + spaceCount + '\n\n';      

    for (var i=0; addSpaceCount > i; i++) {
      spacesToAdd += ' ';
    }
  }

  var updated = elem.innerHTML.substring(0, spaceIndex) + spacesToAdd;
  elem.innerHTML = updated;
}

How do I ensure that the string within my DIV is always a minimum length? If its less than the minimum length, I just want to add some spaces to get to the minimum length so that my DIV renders as I want.

Thank you

I have a web page that has a DIV on it. This DIV is marked as contenteditable. I need the DIV to be "inline". I also need it to be a minimum size. Since inline elements can't have a min-width, I'm trying to fake it by using a string of  .

Basically, as a user types, I want to add or remove &nbsp elements unless the string is longer than the minimum size. My problem is, when rendered, it seems that every-other   element is rendered as a space. This throws my math off. I'm not sure why this is happening. I've created a Fiddle here. The JavaScript for this looks like this:

function onKeyDown(elem, spaceCount) {
  var space = ' ';
  var spacesToAdd = '';
  var addSpaceCount = 0;

  var d = document.getElementById('debug');


  var spaceIndex = elem.innerHTML.indexOf(space);
  if (spaceIndex !== -1) {
    addSpaceCount = (elem.innerHTML.length - spaceIndex) / (space.length);
    d.value += 'text: ' + elem.innerHTML + '\n';
    d.value += 'len: ' + elem.innerHTML.length + ' index: ' + spaceIndex + ' count: ' + addSpaceCount + ' original: ' + spaceCount + '\n\n';      

    for (var i=0; addSpaceCount > i; i++) {
      spacesToAdd += ' ';
    }
  }

  var updated = elem.innerHTML.substring(0, spaceIndex) + spacesToAdd;
  elem.innerHTML = updated;
}

How do I ensure that the string within my DIV is always a minimum length? If its less than the minimum length, I just want to add some spaces to get to the minimum length so that my DIV renders as I want.

Thank you

• javascript
• css

Share Improve this question Follow asked Dec 2, 2016 at 20:30 user70192user70192 14.2k5353 gold badges167167 silver badges244244 bronze badges 1

• Why do you wnat a minimum space? Just so you can see it? – ntgCleaner Commented Dec 2, 2016 at 20:34

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

Use white-space: pre-wrap; in CSS property for contenteditable.

Use display:inline-block then you don't need the JS.

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

span {display:inline-block; min-width:200px; border-bottom:1px solid blue;}

<p>Who said <span>inline elements</span> can't have a minimum width?</p>

Updated jsFiddle

Update. Can't use inline block?

You could use a css :after pseudo filled with spaces and have your JS edit that content so that its doesn't mess with the actual text being inputted.

var editables = document.querySelectorAll("div[contenteditable=true]");
for(e=0; e<editables.length; e++){
  editables[e].addEventListener("input",onInput);
  onInput.call(editables[e]);
}
function onInput() {
  var elem = this,
      minLen = elem.getAttribute("data-minlen"),
      space = '\u00A0',//a hex nbsp
      spacesToAdd = '',
      addSpaceCount = minLen - elem.innerHTML.length;
  //add spaces
  for(i=0; i<addSpaceCount; i++){spacesToAdd += space;}
  elem.setAttribute("data-mincontent",spacesToAdd);
}

div[contenteditable] {border-bottom:solid 1px blue; display:inline; outline:none;}
div[contenteditable]:after {content: attr(data-mincontent);}

Lorem ipsum <div contenteditable="true" data-minlen="5"></div> dolor sit amet, <div contenteditable="true" data-minlen="20"></div> consectetur adipiscing elit.

As you can see I've used an event listener rather than inline events and have set it up so you can have any number of content editable regions on the page. All you have to do is set the minLen data attribute.

https://jsfiddle/nh1k12bg/4/

If you're trying to just have the inline thing show, give it a style of display:inline-block; and a min-width:100px; (or whatever). then it will always show as a minimum area.

<div contenteditable="true" style="border-bottom:solid 1px blue; display:inline-block; min-width:100px; outline:none;" onkeydown="onKeyDown(this, 5);">

https://jsfiddle/nh1k12bg/1/

Update Try using a simple display:block; float:left; instead on your element.

https://jsfiddle/nh1k12bg/2/

I fix my bugs using

<div (blur)="changeText($event.target.innerHTML)"> </div>

Blur fixes cursor position bugs and my function replace   for white space.

   public changeText(event, el): void {
    var re = / /gi;
    var str = event;
    var newstr = str.replace(re, ' ');
   }

Use pre element. It respects whatever space inside the element ##

<div contentEditable="true" >
  <pre ></pre>
</div>

本文标签： javascriptUpdating contenteditable DIV with spacesStack Overflow