html5輸入錯誤提示

Question

我正在用html5寫移動頁面，並且有一個需要屬性的輸入元素。如果沒有輸入，錯誤提示會顯示。但它出現在chrome v30的輸入中心點。所以我的quetion是如何將錯誤提示移到輸入的開頭？

<input type='text' required='required' data-tips='why here?why not start?'/> 
<script type='text/javascript'> 
    var i = document.getElementsTagName('input')[0]; 
    i.setCustomValidity(i.getAttribute('data-tips')); 
</script> 

Answer 1

你不能，這只是它是如何，瀏覽器都呈現不同它，你必須在原生看起來無法控制。

在Chrome中，可以使用各種::-webkit-validation-bubble*僞元素來更改外觀，但可以使用support for this was removed。

所以，如果你想現在改變外觀，那麼你將不得不壓制本地氣泡並實現自己的自定義UI，例如參見webshims lib constraint validation的演示。