wordwrap和模式atributes不工作在我的网站上

我正在建设一个网站，我用这个autocomplete jquery我想要长词（比输入字段更长的单词，打破下一行，或让用户来制动它们。按ENTER键我试过这段代码：wordwrap和模式atributes不工作在我的网站上

.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制动，它只是隐藏，这是比输入字段长字的其余

的第二件事情，我想只允许以特定字符开始的单词，在这种情况下，我选择字母“ch”或“Ch”，我尝试使用“pattern”参数进行设置，但它不适用于RK太...

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

这里是小提琴：https://jsfiddle.net/fm0r0dmt/

和TextArea不支持模式属性。

来源

2016-11-30 user7176800

的[在<输入型输入的多行可能的复制= “文本” />](http://stackoverflow.com/questions/6262472/multiple-lines-of-输入输入类型文本） – jmcgriz

答案有评论textarea不支持模式属性... – user7176800

处理它的另一种方式是与一个隐藏的输入字段和一个跨度更新，我会更新我的答案包括一个例子。 – jmcgriz

<input />属性不支持多行格式。如果您想要将较长的条目分割到下一行，则必须使用<textarea></textarea>

有关使用input元素但支持多行的自定义字段的示例，请查看附加的代码示例。对于这个例子来说，循环是不必要的，因为只有一个输入，但是它被设置为像一个组件那样工作，以便在同一页面上可以使用多个循环。

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>

来源

2016-11-30 21:41:24 jmcgriz

wordwrap和模式atributes不工作在我的网站上

回答

相关问题