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

我有一个窗体，它有默认值，提示用户输入数据。如何将这段代码转换为javascript函数？

这是我的表格。

<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...';}"

我该怎么做？

来源

2011-02-28 Ibrahim Azhar Armar

可能重复[我如何将这段代码转换为javascript函数？]（http://stackoverflow.com/questions/5139460/how-do-i-convert-this-piece-of-code- into-javascript-function） – Alnitak 2011-02-28 08:11:18

@Alnitak：因为这是第一个问题，所以其他的是重复的。 – Guffa 2011-02-28 08:13:54

是的，我很抱歉。没有完全注意到它。 – 2011-02-28 08:18:38

而不是包括“在线”的任何代码，你可以这样做：

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'));

来源

2011-02-28 08:08:14 Hamish

代码给我下面的错误e1为空。即使它具有价值。什么可能是错误的？ – 2011-02-28 08:42:03

您尚未正确传递元素 - 请确保您在表单之后调用该元素，并确保ID正确无误。 – Hamish 2011-02-28 09:10:19

我不确定发生了什么问题，现在它给了我很多不同的问题，生病发布另一个问题。感谢您的帮助。我真的很喜欢你代表它的代码它是整洁的:) – 2011-02-28 09:38:10

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...')" />

来源

2011-02-28 08:00:22 krtek

如果你是使用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); 
    }); 
    }); 
});

来源

2011-02-28 08:09:24 Guffa

+1我认为这是我们可以使用JQuery消除多行代码的最好方法。 – Sukhjeevan 2011-02-28 08:16:29

当代码完全等同于'vanilla'版本时，为什么要使用jQuery，除了下载jQuery的所有额外开销，启动对象（在每个val（）调用上不少）。 – Hamish 2011-02-28 09:14:33

@Hamish：如果你已经在使用jQuery，你可以使用jQuery。如果您再次阅读答案，并从头开始，您会看到我以这种确切的条件开始了答案。 – Guffa 2011-02-28 10:49:13

稍微面目可憎，但在更多的领域最低限度的增加，解决办法：

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); 
});

来源

2011-02-28 08:13:48

是的，这对于像我这样的新手来说是非常可怕的：D，如果你能解释代码中到底发生了什么，我将不胜感激。 – 2011-02-28 08:26:33

不起作用。看起来你的意思是'var a = Array.prototype.slice.call（arguments）'。 – Eric 2011-03-01 18:59:21

埃里克，哎呀，谢谢你捡起来。 – 2011-03-01 23:57:48

看起来你可能会寻找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

来源

2011-02-28 08:20:50 Eric

试试这个：

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..."); 
});

来源

2011-02-28 09:17:14 Sukhjeevan

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

回答

相关问题