wordwrap and pattern atributes not working on my website

Question

I am building an website and I am using this autocomplete jquery I wanted the long words (words longer than the input field is, to break to the next line, or let user to brake them with ENTER key. I tried this code:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

but with no result, it doesent brake, it just hides, rest of the word which is longer than the input field.

The second thing I wanted is to allow only words starting with particular character. In this case I choose the letter "ch" or "Ch" I tried to make it with "pattern" parameter but it doesnt work too...

<input id="tags" pattern="ch+" required>

Here is the fiddle: https://jsfiddle.net/fm0r0dmt/

And textarea doesn't support the pattern attribute.

Possible duplicate of [Multiple lines of input in ](http://stackoverflow.com/questions/6262472/multiple-lines-of-input-in-input-type-text) — jmcgriz, Nov 30 '16 at 21:42
The ansver have comment that textarea doesn't support the pattern attribute... — user7176800, Nov 30 '16 at 23:33
The other way to handle it is with a hidden input field and a span that updates, I'll update my answer to include an example of that. — jmcgriz, Dec 01 '16 at 16:19

jmcgriz · Answer 1 · 2016-12-01T16:29:12.097

The <input /> attribute doesn't support multiline formatting. If you want to break long entries to the next line, you'll have to use a <textarea></textarea>

For an example of a custom field that uses an input element but supports multiline, check out the code sample attached. For this example, the loop is unnecessary since there's only one input, but it's set up to function like a component so that more than one can be used on the same page.

function createCustomInput(elem){
  var input = elem.querySelector('input'),
      output = elem.querySelector('span')

  input.addEventListener('keyup', function(){
    output.textContent = this.value
  })

  output.addEventListener('click', function(){
    input.focus()
  })
}

var customInputs = document.querySelectorAll('.customInput'),
    len = customInputs.length

while(--len > -1){
  createCustomInput(customInputs[len])
}

.customInput {
  position: relative;
  width: 100px;
  border: 1px solid black;
  min-height: 20px;
}
.customInput span, .customInput input {
  display: block;
  width: 100%;
}
.customInput span {
  white-space: pre-wrap;      /* CSS3 */   
  white-space: -moz-pre-wrap; /* Firefox */    
  white-space: -pre-wrap;     /* Opera <7 */   
  white-space: -o-pre-wrap;   /* Opera 7 */    
  word-wrap: break-word;      /* IE */
}
.customInput input {
  position: absolute;
  opacity: 0;
}

<div class="customInput">
  <input type="text" pattern="ch+">
  <span></span>
</div>

wordwrap and pattern atributes not working on my website

1 Answers1