2012-08-17 47 views
4

如下所示:http://msdn.microsoft.com/library/windows/apps/Hh465498WebKit和Mozilla中的-ms-clear等價物是什麼?

Mozilla和Webkit有相同的選項嗎?文本輸入上的清除按鈕適用於觸摸屏應用程序。我不想要任何JavaScript解決方法,並且簡單的CSS修復會非常有幫助。

我已經知道這是可能的JavaScript,但IE 10有一個內置的解決方案,用於顯示清除按鈕,我想知道是否有其他瀏覽器有類似的選項?

+0

已經提供了答案我的jQuery插件的鏈接 - 這在所有瀏覽器中都差不多 – exexzian 2013-07-11 22:55:25

回答

8

簡短的回答是

號有沒有辦法使用CSS來生成一個按鈕,將清除輸入的內容,而無需使用JavaScript。

清除按鈕內置在IE10的功能。 -ms-clear不是生成它的原因,而只是將其定位到樣式的一種方法。

但我應該提到的是,Chrome中的<input type=search>​字段也會給你一個清晰的按鈕,但不會在正常的<input type=text>​字段中出現。

+2

@Akash:有沒有理由不接受我的答案? – tw16 2012-12-03 16:25:07

+0

@Aashash:請不要忘記接受答案。 – tw16 2018-02-20 13:27:50

0

你不能真正做到這一點使用CSS ..

,但你可以用戶jQuery和它的簡單。所有你gotto做的是...

HTML代碼:

<form id="myform" method="post"> 
<input type.... /> 
<input type.... /> 
<input type.... /> 
<input type="button" id="clear" name="clear" /> 
</form> 

jQuery代碼:

$("#clear").click(function(){ 
    $("#myform").reset(); 
}); 

,這將工作..但表單標籤是必要的。

+1

你讀過這個問題了嗎? – 2012-08-17 11:45:59

0

是啊不喜歡Javascript?看起來很容易的jQuery是如何讓這個過程:

標記

<form> 
    <input type="text"> 
    <button>X</button> 
</form> 

jQuery的

$("form").on("click", "button", function() { 
    $("input").val(""); 
    return false; 
});​​​​​ 

http://jsfiddle.net/QyE92/

使用CSS,你可以適當樣式的按鈕,它的位置幾乎準確地模擬了城域接口中的「x」。

+0

我知道它可能與JavaScript和我已經有解決方案,IE 10默認顯示關閉按鈕,我想知道如果任何其他瀏覽器將與類似的解決方案或已經擁有它。 – 2012-08-20 13:17:52

2

一直在尋找同樣的問題,所以我做了一個jQuery插件(TextClear)提供相同的功能:
這裏下載link


和背後這一招:

  • 在輸入文本字段上設置背景圖像並將其定位到像
{ 
    background-image: url('imagesUrl'); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-size: 10% 90%; 
    padding-right: 1%; 
} 
  • 然後通過映射的立場上處理click事件(你可以查看源代碼,以及詳細的邏輯)
相關問題