使用CSS和JS進行輸入類型提交的轉換不起作用

我創建了兩個按鈕Let’s Go!和click me。一個是input type submit，第二個是anchor tag。當用戶點擊它時，anchor tag的轉換正在工作，但如果點擊，則input type submit無法工作。使用CSS和JS進行輸入類型提交的轉換不起作用

檢查劇本波紋管。還有沒有其他簡單的方法來解決這個問題？

const isMobile = window.navigator.userAgent.match(/Mobile/) && window.navigator.userAgent.match(/Mobile/)[0] === "Mobile"; 
 
const event = isMobile ? "touchstart" : "click"; 
 
const button = document.querySelectorAll('*[data-animation="ripple"]'), 
 
    container = document.querySelector(".container"); 
 
for (var i = 0; i < button.length; i++) { 
 
    const currentBtn = button[i]; 
 
    currentBtn.addEventListener(event, function(e) { 
 
    e.preventDefault(); 
 
    const button = e.target, 
 
     rect = button.getBoundingClientRect(), 
 
     originalBtn = this, 
 
     btnHeight = rect.height, 
 
     btnWidth = rect.width; 
 
    let posMouseX = 0, 
 
     posMouseY = 0; 
 
    if (isMobile) { 
 
     posMouseX = e.changedTouches[0].pageX - rect.left; 
 
     posMouseY = e.changedTouches[0].pageY - rect.top; 
 
    } else { 
 
     posMouseX = e.x - rect.left; 
 
     posMouseY = e.y - rect.top; 
 
    } 
 
    const baseCSS = `position: absolute; 
 
\t \t \t \t \t width: ${btnWidth * 2}px; 
 
\t \t \t \t \t \t height: ${btnWidth * 2}px; 
 
\t \t \t \t \t \t transition: all linear 700ms; 
 
\t \t \t \t \t transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);border-radius: 50%; 
 
\t \t \t \t \t background: var(--color-ripple); 
 
\t \t \t \t top:${posMouseY - btnWidth}px; 
 
\t \t \t \t left:${posMouseX - btnWidth}px; 
 
\t \t \t \t pointer-events: none; 
 
\t \t \t \t transform:scale(0)` 
 

 
    var rippleEffect = document.createElement("span"); 
 
    rippleEffect.style.cssText = baseCSS; 
 

 
    //prepare the dom 
 
    currentBtn.style.overflow = "hidden"; 
 
    this.appendChild(rippleEffect); 
 

 
    //start animation 
 
    setTimeout(function() { 
 
     rippleEffect.style.cssText = baseCSS + `transform:scale(1); opacity: 0;`; 
 
    }, 5); 
 

 
    setTimeout(function() { 
 
     rippleEffect.remove(); 
 
     //window.location.href = currentBtn.href; 
 
    }, 700); 
 
    }) 
 
}

:root { 
 
    /* if u want to change the color of 
 
\t * the ripple change this value 
 
\t */ 
 
    --color-ripple: rgba(255, 255, 255, 0.8); 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 200px; 
 
    margin: auto; 
 
} 
 

 
*[data-animation="ripple"] { 
 
    position: relative; 
 
    /*Position relative is required*/ 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    outline: none; 
 
    padding: 20px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%); 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    line-height: 14px; 
 
    border: none; 
 
    font-weight: 200; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3); 
 
    cursor: pointer; 
 
    /*border-radius: 50px;*/ 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 

 
*[data-animation="ripple"]:focus { 
 
    outline: none; 
 
} 
 

 
*[data-animation="ripple"]::selection { 
 
    background: transparent; 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a data-animation="ripple">Click Me</a> 
 
</div> 
 
<input type="submit" name="searchbtrn" value="Let’s Go!" data-animation="ripple" width=100>

來源

2017-07-26 Narendra Verma

這是因爲你不能'appendChild'到'input'。因此，您使用的效果邏輯不適用於內聯元素（例如'input'，'img'） –

感謝您的回覆。我應該在哪裏改變它？ –

這不是一個簡單的改變 - 你需要重新思考它是如何工作的。 –

正如在評論中已經指出，爲什麼它不工作的原因是因爲你想追加一個元素到input，這是無法完成的。

一種解決方案是將input替換爲button，但您也表示您不想這樣做。

我能想到的唯一的其他解決方案是將input用span包裹起來，並將波紋附加到該範圍。效果完成後，打開input。我在下面的例子中做了這個。

const isMobile = window.navigator.userAgent.match(/Mobile/) && window.navigator.userAgent.match(/Mobile/)[0] === "Mobile"; 
 
const event = isMobile ? "touchstart" : "click"; 
 
const button = document.querySelectorAll('*[data-animation="ripple"]'), 
 
    container = document.querySelector(".container"); 
 
for (var i = 0; i < button.length; i++) { 
 
    const currentBtn = button[i]; 
 
    currentBtn.addEventListener(event, function(e) { 
 
    e.preventDefault(); 
 
    const button = e.target, 
 
     rect = button.getBoundingClientRect(), 
 
     originalBtn = this, 
 
     btnHeight = rect.height, 
 
     btnWidth = rect.width; 
 
    let posMouseX = 0, 
 
     posMouseY = 0; 
 
    if (isMobile) { 
 
     posMouseX = e.changedTouches[0].pageX - rect.left; 
 
     posMouseY = e.changedTouches[0].pageY - rect.top; 
 
    } else { 
 
     posMouseX = e.x - rect.left; 
 
     posMouseY = e.y - rect.top; 
 
    } 
 
    const baseCSS = `position: absolute; 
 
\t \t \t \t \t width: ${btnWidth * 2}px; 
 
\t \t \t \t \t \t height: ${btnWidth * 2}px; 
 
\t \t \t \t \t \t transition: all linear 700ms; 
 
\t \t \t \t \t transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);border-radius: 50%; 
 
\t \t \t \t \t background: var(--color-ripple); 
 
\t \t \t \t top:${posMouseY - btnWidth}px; 
 
\t \t \t \t left:${posMouseX - btnWidth}px; 
 
\t \t \t \t pointer-events: none; 
 
\t \t \t \t transform:scale(0)`; 
 

 
    var rippleEffect = document.createElement("span"); 
 
    rippleEffect.style.cssText = baseCSS; 
 

 
    //prepare the dom 
 
    currentBtn.style.overflow = "hidden"; 
 
    var btn = this; 
 
    if (btn.tagName === "INPUT") { 
 
     $(btn).wrap('<span class="ripple-wrap"></span>').after(rippleEffect); 
 
    } 
 
    else { 
 
     btn.appendChild(rippleEffect); 
 
    } 
 

 
    //start animation 
 
    setTimeout(function() { 
 
     rippleEffect.style.cssText = baseCSS + `transform:scale(1); opacity: 0;`; 
 
    }, 5); 
 

 
    setTimeout(function() { 
 
     rippleEffect.remove(); 
 
     if (btn.tagName === "INPUT") { 
 
     $(btn).unwrap(); 
 
     } 
 
     //window.location.href = currentBtn.href; 
 
    }, 700); 
 
    }) 
 
}

:root { 
 
    /* if u want to change the color of 
 
\t * the ripple change this value 
 
\t */ 
 
    --color-ripple: rgba(255, 255, 255, 0.8); 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 200px; 
 
    margin: auto; 
 
} 
 

 
*[data-animation="ripple"] { 
 
    position: relative; 
 
    /*Position relative is required*/ 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    outline: none; 
 
    padding: 20px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%); 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    line-height: 14px; 
 
    border: none; 
 
    font-weight: 200; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3); 
 
    cursor: pointer; 
 
    /*border-radius: 50px;*/ 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 

 
*[data-animation="ripple"]:focus { 
 
    outline: none; 
 
} 
 

 
*[data-animation="ripple"]::selection { 
 
    background: transparent; 
 
    pointer-events: none; 
 
} 
 

 
.ripple-wrap { 
 
    position: relative; 
 
    display: block; 
 
    overflow: hidden; 
 
    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a data-animation="ripple">Click Me</a> 
 
</div> 
 
<input type="submit" name="searchbtrn" value="Let’s Go!" data-animation="ripple" width=100>

來源

2017-07-26 13:17:49 vi5ion

它完全適用於我。感謝您的幫助。 Upvote從我身邊 –

您可以使用button標籤這個試試下面

<button type="submit" name="searchbtrn" data-animation="ripple">Let's Go!</button>

來源

2017-07-26 12:45:52

感謝您的回覆。按鈕將工作，但我不需要按鈕。在想使用輸入種類 –

但是作爲同一種提交輸入的按鈕。你做任何事情，然後請在這裏重播我會解決這個問題。 –

我們可以在CSS的幫助下進行轉換嗎？ –

使用CSS和JS進行輸入類型提交的轉換不起作用

回答

相關問題