入力に目立たないデフォルト/プレースホルダーテキストを書き込もうとしています（実際には、比較的上に配置さlabelれinput、上で非表示になり、上で入力が空でない場合は非表示のままonFocusになります）、jQueryを使用したくありません。ページで使用されるのは JavaScript のみです。したがって、jQuery の使用は少しやり過ぎのようです。onBlur
jQueryなしでこれを行うにはどうすればよいですか?
ありがとうございました。
編集: アイデア ( ) は知ってgetElementByIDいますが、それをドキュメントに追加する方法を詳しく調べています。以前に使用したことがあるものが望ましいです。ありがとうございました。
編集：ありがとう、私は最終的にjQueryを使って答えを見て行きました:] Robert Koritnik - 有効なポイントとスタイリングのため ;])
を使用して入力のハンドルを取得したら、イベントonfocusとイベントを手動でアタッチする必要があります。onblurgetElementById
次に例を示します：http ：//www.aspsnippets.com/Articles/Watermark-TextBox-using-JavaScript.aspx
これは、JQueryなしで私がそれを行う方法です。デフォルトのテキストが表示されるとコントロールがグレー表示され、必要に応じてデフォルトのテキストを入力できるようになります。「title」タグは、JavaScriptを無効にするユーザー向けのツールチップにフォールバックします。
<html>
<body>
<input type="text" value="" title="default text" />
<script type="text/javascript">
function DefaultInput(e) {
// Get the elements
this.e = e
this.d = e.title
this.s = e.style
e.removeAttribute('title') // remove the tooltip
e.value = '' // IE cached value remove HACK!
// Bind the events
e.onblur = this.bind(this.onblur)
e.onfocus = this.bind(this.onfocus)
// Show the initial value in gray
this.onblur()
}
DefaultInput.prototype = {
bind: function(f) {
// Return `f` so it's always called as an object of DefaultInput
var o = this
return function(){
f.apply(o, arguments)
}
},
onblur: function() {
// Gray out my value and show the default text if my value's blank
if (!this.h && !this.e.value) {
this.s.color = 'gray'
this.e.value = this.d
this.h = true // true -> help text displayed
// false -> help text hidden/user entered value
}
},
onfocus: function() {
// Make the text black and blank the text if in "help" mode
if (this.h) {
this.s.color = 'black'
this.e.value = ''
this.h = false
}
}
}
// Make sure the page is loaded before
// running for twitchy browsers like IE
window.onload = function() {
// Add defaults for all text input elements which have a `title`
var L = document.getElementsByTagName('input')
for (var i=0; i<L.length; i++) {
var e = L[i]
if (e.type=='text' && 'title' in e)
new DefaultInput(e)
}
}
</script>
</body>
編集：コメントを少しクリアし、いくつかのIEのバグを修正して、入力コントロールを個別に初期化するのではなく、異なるページの変換時間が短くなるように、の<input>タグを検索するようにしました;-)title
jQueryを使用しても邪魔にならず、HTML5ブラウザーの機能を使用して、次のように入力できます。
<input type="whatever" placeholder="Your Default Text"/>
私はModernizrを使用して、ブラウザーのhtml5機能をチェックし、ブラウザーが属性を理解しない場合は、placeholderこの小さなjavascriptを使用してこの関数をエミュレートします。
if (!Modernizr.input.placeholder) {
$('input').each(function(){
var obj = $(this);
var placeholder = obj.attr('placeholder');
if (placeholder) {
obj.val(placeholder);
obj.focus(function(){
var obj2 = $(this);
if (obj2.val() == obj2.attr('placeholder')) obj2.val('');
});
obj.blur(function(){
var obj2 = $(this);
if (obj2.val() == '') obj2.val(obj2.attr('placeholder'));
});
}
});
}
HTMLコードにJavaScriptが必要ないため、目立たないようになっています。他のフレームワークを使用する場合は、上記の関数を簡単に変更できます。フレームワークはブラウザー間の非互換性を回避するのに優れた役割を果たしているため、フレームワークなしではソリューションを使用しません。
jQuery は、開発者がブラウザーの特殊性を気にせずに簡単に何かを達成できるようにするクロスブラウザー ライブラリにすぎません。そして、一度ロードすると (かなり小さい) キャッシュされるので、後で開発/テストの時間を大幅に節約できるので、心配する必要はありません。
しかし、何かを手動で行うことに決めた場合は、いつでも通常の Javascript を使用して、必要に応じて DOM を操作できます。この場合、あなたの親友はもちろん（アンドリューが指摘したように）：
getElementById()とgetElementsByTagName()ただし、DOM とスタイルを操作するため、すべての一般的なブラウザーに対してコードをテストするようにしてください。要素にカスタム属性を使用するINPUT場合は、2 番目の関数を使用することをお勧めします。そのため、追加機能をすべての入力に一度にアタッチし、次のような特定のカスタム アトリビュートを定義するものにのみアタッチします。
<input type=text id="inputX" name="inputX" placeholder="Enter something">
スクリプトはすべての入力を取得し、カスタム属性の存在を確認し、その属性を定義する要素にイベントを添付します。これにより、ID に依存せず、コードをユニバーサルにすることができるため、アプリ全体で再利用できます。または他のプロジェクトでも。
補足: Andrew の例は、(ラベルを使用して) あなたがやりたいと言ったものとは多少異なりますが、とにかくスクリプトを実行するため、同じアプローチを使用することをお勧めします。目立たないようにするために、 Javascript を使用してデフォルトのコンテンツを設定して、テキストボックスのデフォルト値とスタイルが Javascript を実行していないユーザーに設定されないようにしてください。
これが私のやり方です：
http://jsbin.com/ehivo3 (ソースコード)
<input type="text" name="myfield" id="myfield" value="Please, fill my field!!!" />
$(document).ready(function() {
// Handle each input on focus() and blug()
$('input[type="text"]').each(function() {
$(this)
// Store the default value internally
// Don't use .val() because browser autofill will poison it
.data('defaultValue', $(this).attr('value'))
// Handle the focus() (when you enter the field)
.focus(function() {
if ($(this).val() == $(this).data('defaultValue'))
$(this).val('');
})
// Handle the blur() (when you leave the field)
.blur(function() {
if ($(this).val() == '')
$(this).val($(this).data('defaultValue'));
});
});
// Clear all fields with "default value" on submit
$('form').submit(function() {
$('input[type="text"]', $(this)).each(function() {
// If the input still with default value, clean it before the submit
if ($(this).val() == $(this).data('defaultValue'))
$(this).val('');
});
});
});
そしてそれだけです！無効または余分な属性、有効なマークアップはなく、すべて jQuery ファイルで処理されます。:)
次のようなものが必要だと思います。
<input type="text" onfocus="if (this.value == this.getAttribute('mydefaulttext')) this.value = '';" onblur="if (this.value == '') this.value = this.getAttribute('mydefaulttext');" mydefaulttext="click here..." value="click here..."/>
<input name="test" type="text" id="test" value="testValue" />
<script type="text/javascript">
var myInput = document.getElementById("test");
myInput.onfocus = function() {
this.value = '';
}
myInput.onblur = function() {
if(this.value == '') this.value = "testValue";
}
</script>