1

以下のコード スニペットまたはjsfiddleを参照してください。

私がやろうとしているのは、「google.com」のようなURLをテキストボックスに入力し、テキストボックスにEnterキーを押すたびにサイト/ URLに移動するように設定することです。

以下を試しましたが、うまくいきませんでした。誰かが助けることができれば、それは大歓迎です。

$("#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>

4

1 に答える 1

1

入力要素はフォーム内にあるため、送信イベントのハンドラーのみが必要です。これは、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 を使用した要素へのアクセスの奇妙な組み合わせです。たとえば、jQuery のみを使用して、これを正規化することを検討してdocument.<element_name>ください。document.getElementById()
  • カスタム ボタン/リンクを作成したのでcursor:pointer;cursor:hand;、ボタンのホバー クラスに追加 (または逆の順序で、今は思い出せません) すると、より Web フレンドリーになります。
于 2012-10-07T15:48:02.420 に答える