持續性HTML輸入佔位符

奇數一個有點...我想對我的輸入佔位符文本做這樣的事情：持續性HTML輸入佔位符

::-webkit-input-placeholder { 
    text-align:right; 
    opacity:.3; 
}

當用戶輸入而不是完全消失文本

。這是否可能沒有一個巨大的JavaScript黑客？

感謝

來源

2012-08-11 nicholas

使用兩行佔位符文本的圖片的背景圖片：不透明和半透明。然後使用「背景位置」樣式來移動背景，以使半透明文本可見。例如：'input {background-image：url（「placeholders.jpg」）; }'和'input：focus {background-position：20px; }'。 – Jay 2012-08-11 08:13:11

如果你不打算做了很多的輸入框，使用背景圖片（與您的佔位符文本）將有助於

input { 
    background:white url(bgtextimage.png) no-repeat; /* image with your placeholder text*/ 
    } 
    input:focus { 
    background:white url(bgtextimage_3.png) no-repeat; /* placeholder text image with an opacity if 0.3 */ 
background-position: right 0px; /* if you want to align text to right */ 
    }

現在你需要停止的背景圖像當元素不在焦點時向左移動。我使用jQuery爲此目的

$('.myinputfield').blur(function() 
{ 
    if($(this).val().length === 0) { 
     $(this).css('background','left 0px'); //keep it to left if the element is empty 
    } 
    else { 
     $(this).css('background-position','right 0px'); //move to right if there's some text 
    } 
});

示例 - http://jsfiddle.net/QuHen/1/

來源

2012-08-11 08:00:41 rzr

現在，這是一個想法。我沒有考慮過。謝謝！ – nicholas 2012-08-12 04:11:04

啊。有一個問題。當輸入模糊時，圖像向左移動，重疊放入場中的任何東西。就我所知，沒有辦法用css測試輸入的值（噢，如果只有input [value =「」]實際上工作就像應該...），這個想法是相當好的。 – nicholas 2012-08-12 04:28:39

您可以使用Javascript IF條件檢查框中是否有文本。如果屬實，請保持圖像正確。等我給你寫一個代碼 – rzr 2012-08-12 05:53:33

所以，它看起來像有沒有辦法通過CSS純粹的這個行爲。

我想出了一個快速的jQuery插件，將爲我做。下面的代碼：http://jsfiddle.net/puTM3/

快速：

$("input[placeholder]").placeholder();

一旦DOM被加載應該採取的用例90％的照顧。

如果你動態編輯dom，那麼任何新的/修改過的輸入都需要重新編輯。

任何人有更好的點子嗎？

來源

2012-08-12 21:11:56 nicholas

這很聰明。 +1 – rzr 2012-08-13 09:17:28

持續性HTML輸入佔位符

回答

相關問題