使用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进行输入类型提交的转换不起作用

回答

相关问题