Question

请参阅下面的代码段或jsfiddle。

我要做的是在文本框中键入一个像“google.com”这样的网址，然后将其设置为每次按下文本框中的输入，它都将指向网站/网址放下。

我尝试了下面的内容，但没有运气。如果有人能提供帮助，我们将非常感激。

$("#go").keyup( function(e) {
    if (e.keyCode == 13) {
        var sitesgohere = document.getElementById("sitesfool");
        sitesgohere.src = "https://" + document.searchme.ducks.value;
    }
});

$("#hidesearch, .search").hide();
$('.container').draggable();

$(".togglesearch").toggle(function() {
    $(".search").fadeIn(800);
    $("#hidesearch").show();
    $("#showsearch").hide();
}, function() {
    $(".search").fadeOut(400);
    $("#hidesearch").hide();
    $("#showsearch").show();
});

$("#go").click(function() {
    var siteurl = (document.sites.siteurl.value);
    
    var sitesgohere = document.getElementById("sitesfool");
    sitesgohere.src = "http://" + siteurl;
});

$("#searchthis").click(function() {
    var siteurl = (document.searchme.ducks.value);
    
    var sitesgohere = document.getElementById("sitesfool");
    sitesgohere.src = "https://duckduckgo.com/?q=" + siteurl;
});

html, body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:rgb(0,156,156);
    overflow:hidden;}
    
div.nav {
    padding:5px;
    margin:0px 0px 0px 1%;
    width:98%;
    height:20px;
    background-color:rgba(0,0,0,0.7);
    box-shadow:0px 0px 8px rgba(0,0,0,1);
    border-radius:0px 0px 10px 10px;}
    
div.togglenav {
    cursor:pointer;
    position:absolute;
    top:0px;
    right:10px;
    padding:5px;
    width:20px;
    height:20px;
    margin:0px 0px 0px 1%;
    background-color:rgba(0,0,0,0.7);
    box-shadow:0px 0px 8px rgba(0,0,0,1);
    border-radius:0px 0px 10px 10px;}
    
form[name="sites"] {
    padding-left:0.5%;}
    
div.urlspace {
    position:absolute;
    top:5%;
    left:0px;
    width:100%;
    height:95%;}

div.containsearch {
    position:absolute;
    bottom:0px;
    left:0px;
    padding:15px 10px 10px 10px;
    width:auto;
    height:20px;
    background-color:rgba(0,0,0,0.7);
    box-shadow:0px 0px 8px rgba(0,0,0,1);
    border-radius:0px 10px 0px 0px;}
    
div.containsearch div {
    display:inline;}
    
div.togglesearch {
    position:relative;
    bottom:7px;
    cursor:pointer;
    float:right;
    margin-left:5px;
    width:auto;
    height:20px;
    overflow:hidden;}
    
#search {
    position:relative;
    bottom:7px;
    cursor:pointer;
    float:right;
    margin-left:5px;
    width:auto;
    height:20px;
    overflow:hidden;}
    
input[name="ducks"] {
    width:250px;}
    
form {
    position:relative;
    display:inline;
    padding:0;
    margin:0;
    top:-5px;}
    
svg {
    margin:5px 0px 0px 5px;
    padding:0px 5px 5px 0px;
    fill:white;
    transition:all 250ms ease-in-out;
    -webkit-transition:all 250ms ease-in-out;
    -moz-transition:all 250ms ease-in-out;
    -o-transition:all 250ms ease-in-out;
    -ms-transition:all 250ms ease-in-out;}
    
svg:hover {
    fill:#00ff00;}
    
svg#go {
    fill:#00bc00;
    transition:all 250ms ease-in-out;
    -webkit-transition:all 250ms ease-in-out;
    -moz-transition:all 250ms ease-in-out;
    -o-transition:all 250ms ease-in-out;
    -ms-transition:all 250ms ease-in-out;}
    
svg#go:hover {
    fill:#00ff00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="nav">
    <form name="sites">
        <input type="text" name="siteurl" style="width:80%;">
    </form>
    
    <svg id="go" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10">
        <polygon points="0,0  0,10  10,5">
    </svg>
</div>
    
<div class="urlspace">
    <iframe id="sitesfool" height="100%" width="100%" frameBorder="0" src="http://michaelsdelivery.tk/">
        Your browser does not support IFRAME's
    </iframe>
</div>
    
<div class="containsearch">
    <div class="search">
        <form name="searchme">
            <input type="text" name="ducks">
        </form>
        
        <svg id="searchthis" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10">
            <polygon points="0,0  0,10  10,5">
        </svg>
    </div>
    
    <div class="togglesearch">
        <svg id="hidesearch" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" style="margin:10px 0px 0px 10px;">
            <polygon points="10,10  10,0  0,5">
        </svg>
        
        <svg id="showsearch" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" style="margin:10px 0px 0px 10px;">
            <polygon points="0,0  0,10  10,5">
        </svg>
    </div>
</div>

Answer 1

由于您的input元素位于表单内，因此只需要一个submit事件处理程序，因为在按下Enter键时会触发它：

$("form[name='sites']").submit(function(e) {
    // TODO: extract a function with the contents of this click handler
    $('#go').click();

    e.stopPropagation();
    return false;
});

关于代码风格的几点评论：

这个小提琴是使用jQuery，document.<element_name>和document.getElementById()访问元素的奇怪组合 - 考虑对此进行规范化，例如仅使用jQuery;
由于您创建了自定义按钮/链接，因此向按钮的悬停类添加cursor:pointer;cursor:hand;（或以相反顺序，现在记不起来）将更加适合网络。

更改文本框iframe源

1 个答案: