Question

我已经通过Stack，W3和其他工具对此进行了研究，但是我在那里找到的解决方案不起作用。以下是我的html代码的一部分，我已尽力将其保持整洁（绝不是专家）。

<select name="ctl00$ContentPlaceHolder1$ddlSearchCriteria" id="ctl00_ContentPlaceHolder1_ddlSearchCriteria" style="width:150px;">
                        <option value="LastName">Last Name</option>
                        <option value="FirstName">First Name</option>
                        <option value="Phone">Phone Number</option>
                        <option value="Department">Department</option>
                        <option value="Division">Division</option>
                        <option value="Location">Location</option>
                        <option value="Title">Title</option>
                        <option value="Email">Email Address</option>
                        <option value="Keywords">Keywords</option>
                    </select>
                    <div style="height:10px"></div>
                    <input name="ctl00$ContentPlaceHolder1$txtSearchString" type="text" id="ctl00_ContentPlaceHolder1_txtSearchString" style="width:160px;">
                    <button type="button" name="ctl00$ContentPlaceHolder1$Button1" id="ctl00_ContentPlaceHolder1_Button1" style="position: absolute; height:22px; " onclick="myFunction()">Go</button>
                    <div style="height:5px;"></div>
                    </td>
                <td style="width:48%; height: 27px;">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
     var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
       function myFunction() 
         {
           var dropDownChoice = document.getElementById("ctl00_ContentPlaceHolder1_ddlSearchCriteria").value;
           var inputText = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString").value;
           var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
           window.open(GoToURL);
         }
    </script>

我正在尝试做到这一点，以便在您单击输入时激活提交按钮。我以https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp和Trigger function on Enter keypress为例。

但是这不起作用，它所做的就是破坏我的代码。不知道我是否把它放在错误的位置。我在函数的var inputText下面添加了它。

Answer 1

您需要在输入文本字段上添加keyup事件监听器

将此添加到您的javascript

display: function() {
    // step 1
    let queryString = frames.displayArea.location.href.split("?")[1];
    let paramArr = queryString.split("&");
    let params = {};

    paramArr.forEach((param) => {
        let [name, value] = param.split("=");
        params[name] = value;
    })

    console.log("params: ", params)

    // step 2
    Dash.nextIndex = (params.page_id) 
        ? (params.page_id + 1) % Dash.dashboards.length
        : 0;

    var dashboard = Dash.dashboards[Dash.nextIndex]; 

    // step 3
    let newURL = dashboard.url + "?display_id=" + params.display_id
        + "&page_id=" + Dash.nextIndex;

    // Unrelated nit: bracket access IMHO should only be used when specifying a 
    // property by the string value contained in a variable, or when the 
    // property name would be an invalid javascript variable name (starting 
    // with a number, including spaces, etc)
    frames.displayArea.location.href = newURL;

    setTimeout(Dash.display, dashboard.time * 1000);
}

Working Example

Answer 2

将type="button"替换为type="submit"

添加一个<form onsubmit="myFunction">

用<select>将<form>包裹起来：

<form onsubmit="myFunction">
    <select>...</select>
</form>

这是您的函数应采取的措施，以防止表单提交（我们未添加“操作”，因此它将提交给自己）

function myFunction(event){
    // Stop the form from submitting (default functionality)
    event.preventDefault();
    ...
}

您的代码应与此类似（添加了以正确方式获取选择列表值的修复程序）

<form onsubmit="myFunction">
    <select id="mySelect">
        <option value="LastName">Last Name</option>
        <option value="FirstName">First Name</option>
        <option value="Phone">Phone Number</option>
        <option value="Department">Department</option>
        <option value="Division">Division</option>
        <option value="Location">Location</option>
        <option value="Title">Title</option>
        <option value="Email">Email Address</option>
        <option value="Keywords">Keywords</option>
    </select>
    <input type="text" id="myInput">
</form>

<script type="text/javascript">
    function myFunction(event){
        // Prevent the form from submitting (default functionality)
        event.preventDefault();

        var myUrl = "http://bccportal01/webapps/agency/epdsearch/Search.aspx?",
            selectEl = document.getElementById('mySelect'),
            inputEl = document.getElementById('myInput');

        // Append the selected value
        myUrl += "op=" + selectEl.options[selectEl.selectedIndex].value;

        myUrl += "&str=" + inputEl.value;

        window.open(myURL);
    }
</script>

触发按钮单击HTML中的Enter

2 个答案: