ワードラップとパターン属性は私のウェブサイトでは機能しません

Question

私はウェブサイトを構築していて、これを使用していますautocomplete jquery長い単語（入力フィールドよりも長い単語は次の行に壊れたり、 。キーを押しますと、私はこのコードを試してみました：。

.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 */ 
} 

をしかし、結果なしで、それがブレーキをdoesent、それだけで隠し、長い入力フィールドよりも単語の残りの部分

2つ目は私が欲しかったです特定の文字で始まる単語だけを許可することです。この場合、 "ch"または "Ch"という文字を選択します。 "pattern"パラメータで作成しようとしましたが、 rkがあまりにも...ここ

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

はフィドルです：https://jsfiddle.net/fm0r0dmt/

およびTextAreaは、パターンの属性をサポートしていません。

Answer 1

<input />属性は、複数行の書式設定をサポートしていません。長い項目を次の行に分割する場合は、<textarea></textarea>

要素を使用するが、複数行をサポートするカスタムフィールドの例については、添付のコードサンプルを参照してください。この例では、入力は1つだけなのでループは不要ですが、同じページで複数のコンポーネントを使用できるように、コンポーネントのように機能するように設定されています。

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>