如果輸入與模式屬性不匹配，是否可以使用CSS或JavaScript訪問彈出窗口？

我與pattern屬性玩，當然，試圖與故意不符合要求的圖形字符串提交form，給出的HTML：如果輸入與模式屬性不匹配，是否可以使用CSS或JavaScript訪問彈出窗口？

<form action="#" method="post"> 
    <input type="text" pattern="[A-Z]{2,3}" /> 
    <button type="submit">Submit</button> 
</form>

JS Fiddle demo。

我試圖用1，這當然導致了錯誤處理由瀏覽器提交（Chrome瀏覽器21）：

Image showing error-handling/prompt pop-up in Chrome 21

我試着右擊彈出，和「檢查元素「，但就Web開發人員工具而言，我似乎正在檢查input元素（我認爲這很有道理），而不是彈出式對話框。所以，我想知道：是否可以通過JavaScript（用於響應增強）或CSS（用於樣式）訪問/與此對話交互？

主要目標是爲用戶增強功能提供高對比度替代方案，或者提供與網站樣式和顏色方案一致的彈出窗口。

編輯，以鏈接到MDN兼容性信息：

HTML 5 form attribute compatibility。

來源

2012-08-23 David Thomas

相關：http://trac.webkit.org/wiki/Styling%20Form%20Controls#WebKitr82180orlater – jbabey

@jbabey：wow;這似乎是一個實際的答案，然後（至少在Webkit的情況下）。有幾天，我懷疑有一個巨大的郵件列表，我錯過了...... =） –

是可能的樣式彈出，但支持是有限的，只有在基於WebKit的瀏覽器的工作原理。至於其他瀏覽器，可能會有類似的可供選擇的選擇器，但我無法找到它們。

它歸結爲能夠找到/知道這些彈出窗口的DOM結構，然後添加將修改它們的CSS。畢竟，他們只是DOM元素。

例如：http://jsfiddle.net/zbwJP/1/

documentation

來源

2012-08-23 12:53:14 jbabey

彈出對話框從瀏覽器到瀏覽器不同。沒有辦法來設計這些風格（對於cross-broser）。

解決方法是使用JQuery的彈出對話框，您可以將其綁定到該事件。

更多關於這一點，你會發現這裏：

http://jqueryui.com/demos/dialog/

來源

2012-08-23 12:51:02

雖然我很高興，但從閱讀問題必須顯而易見，爲了*使用JavaScript，我寧願使用本機瀏覽器功能，而不是重新實施和/或解決它們。儘管瀏覽器兼容性/實現不完整。 –

好吧:)如果可能的話，嘗試在瀏覽器中使用原生瀏覽器功能，如果有瀏覽器剩下的話，可以嘗試使用JQuery對話框 - 這樣你就可以在任何地方找到解決方案。 –

在Chrome中的最新迭代，支持已被添加爲以下僞選擇

::-webkit-validation-bubble{} 
::-webkit-validation-bubble-top-outer-arrow{} 
::-webkit-validation-bubble-top-inner-arrow{} 
::-webkit-validation-bubble-message{}

檢查here一些信息

Firefox有支持用於元素屬性x-moz-errormessage，它使您可以更改t分機的錯誤信息。信息here

找不到Firefox是否有方式設置錯誤氣泡。

來源

2012-08-23 13:01:31

如果輸入與模式屬性不匹配，是否可以使用CSS或JavaScript訪問彈出窗口？

回答

相關問題