Question

我有一个表单，其默认值提示用户输入数据。

这是我的表格。

<input type="text" id="name" name="name" class="input-text" value="Enter Name..." onfocus="if(this.value == 'Enter Name...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Name...';}" />

<input type="text" id="email" name="email" class="input-text" value="Enter Email Address..." onfocus="if(this.value == 'Enter Email Address...') { this.value = '';}" onblur="if(this.value == '') { this.value ='Enter Email Address...';}"/>

<textarea name="message" id="message" class="input-textarea" onfocus="if(this.value == 'Enter your Message...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your Message...';}">Enter your Message...</textarea>

这里有很多代码重复。我想将以下代码转换为javascript函数。

onfocus="if(this.value == 'Enter Name...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Name...';}"

我该怎么做？

Answer 1

您可以这样做，而不是包含任何“内联”代码：

function autoHideDefault(el) {
    var defaultValue = el.value;
    el.onblur = function() { 
        if(this.value == '') this.value = defaultValue ;
    }
    el.onfocus = function() {
        if(this.value == defaultValue) this.value = '';
    }
}

autoHideDefault(document.getElementById('name'));
autoHideDefault(document.getElementById('email'));
autoHideDefault(document.getElementById('message'));

Answer 2

看起来您可能正在寻找HTML5的placeholder属性。用法如下：

<input type="text" id="name" name="name"
    class="input-text" placeholder="Enter Name..." />

<input type="text" id="email" name="email"
    class="input-text" placeholder="Enter Email Address..." />

<textarea name="message" id="message"
    class="input-textarea" placeholder="Enter your Message..."></textarea>

演示here

Answer 3

如果你正在使用jQuery，你可以使用这样的东西从每个元素中获取引导文本并在焦点和模糊时更改它：

$(function(){
  $('.input-text,.input-textarea').each(function(){
    var lead = $(this).val();
    $(this).focus(function(){
      if($(this).val() == lead) $(this).val('');
    }).blur(function(){
      if ($(this).val().length == 0) $(this).val(lead);
    });
  });
});

Answer 4

function gainFocus(element, text) {
    if(element.value == text) {
        element.value = '';
    }
}

function loseFocus(element, text) {
    if(element.value == '') {
        element.value = text;
    }
}

然后，您可以在元素中使用这两个函数：

<input type="text" id="name" name="name" class="input-text" value="Enter Name..." onfocus="gainFocus(this, 'Enter Name...');" onblur="loseFocus(this, 'Enter Name...')" />

Answer 5

略微可怕的外观，但在更多字段上增加最少，解决方案：

function fieldFocus(m, e) {
    if (e.target.value == m) e.target.value = '';
}
function fieldBlur(m, e) {
    if (e.target.value == '') e.target.value = m;
}
function bind() {
    var f = arguments.shift();
    var t = arguments.shift();
    var a = Array.prototype.slice.call(arguments);
    return function() {
        return f.apply(t, a.concat(arguments));
    };
}
var name = document.getElementById('name');
var email = document.getElementById('email');
var message = document.getElementById('message');
[[name, 'Enter name...'],
 [email, 'Enter email...'],
 [message, 'Enter message...']].
forEach(function(field) {
    field[0].addEventListener('focus', bind(fieldFocus, null, field[1]), false);
    field[0].addEventListener('blur', bind(fieldBlur, null, field[1]), false);
});

Answer 6

试试这个：

<强> HTML：

<input type="text" id="Text1" name="name" class="input-text" />
<input type="text" id="Text2" name="email" class="input-text" />
<textarea name="message" id="Textarea1" class="input-textarea" ></textarea>

<强> JQuery的：

$("#name").focus(function(){
    if($(this).val() == "Enter Name...")
        $(this).val("");
}).blur(function(){
    if($(this).val() == "")
        $(this).val("Enter Name...");
});
$("#email").focus(function(){
    if($(this).val() == "Enter Email Address...")
        $(this).val("");
}).blur(function(){
    if($(this).val() == "")
        $(this).val("Enter Email Address...");
});
$("#message").focus(function(){
    if($(this).val() == "Enter your Message...")
        $(this).val("");
}).blur(function(){
    if($(this).val() == "")
        $(this).val("Enter your Message...");
});

我如何将这段代码转换为javascript函数？

6 个答案: