onblur onfocus的回聲形式

Question

我試圖回顯一個包含多個輸入字段的表單。我想使用onblur和onfocus（請參閱下面的代碼中的條件），但是當我用php回顯它時，javascript函數不起作用。任何幫助糾正問題\技術解釋將不勝感激。

echo '<form action="file.php" method="post"> 
<input type="text" style="width: 450px" maxlength="50" value="' . $data . '" name="data" id="data" 
onblur="if (this.value == "") {this.value = "data";}" 
onfocus="if (this.value == "data") {this.value = "";}" /> 
<input type="submit"> 
</form>'; 

Answer 1

這是難以閱讀：

echo '<form action="file.php" method="post"> 
<input type="text" style="width: 450px" maxlength="50" value="' . $data . '" name="data" id="data" 
onblur="if (this.value == "") {this.value = "data";}" 
onfocus="if (this.value == "data") {this.value = "";}" /> 
<input type="submit"> 
</form>'; 

使用定界符語法，就像這樣：

echo <<< FORM 
<form action="file.php" method="post"> 
<input type="text" style="width: 450px" maxlength="50" value="$data" name="data" id="data" onblur="if (this.value == '') {this.value = '$data';}" 
onfocus="if (this.value == '$data') {this.value = '';}"> 
<input type="submit"> 
</form> 
FORM; 

注意，我換了一些雙引號單引號，因爲他們是嵌套的。

對於事件處理程序（onfocus和onblur），外部引號是雙引號。這些包含屬性值。在雙引號內，任何字符串必須單引號以避免在完成之前關閉屬性值。

http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

Answer 2

這看起來像你試圖實現與內聯JS事件。如果模糊值爲空字符串，它將獲得[data-default]值，如果該值爲焦點上的[data-default]值，它將被清除。

在php中，您應該同時設置[value]和[data-default]值。

echo '<input type="text" value="'. $data .'" data-default="'. $data . '">'; 

var formInput = document.querySelector('#data'); 
 

 
formInput.addEventListener('focus', function(e){ 
 
    if(this.value === this.dataset['default']){ 
 
    this.value = ''; 
 
    } 
 
}, false); 
 

 
formInput.addEventListener('blur', function(e){ 
 
    if(this.value === ''){ 
 
    this.value = this.dataset['default']; 
 
    } 
 
}, false);

<form action="file.php" method="post"> 
 
    <input type="text" name="data" id="data" value="something" data-default="something" /> 
 
</form>