Question

感谢任何人的帮助...下面的PHP包含一个txt文件中的项目列表，每个项目旁边都有一个文本框供用户输入数量，默认设置为1.我是试图在用户点击文本框时清除该框，任何想法？

<input type='text' id='qty' name='$partno' size='1' value='0'>

到目前为止，我已尝试使用JavaScript，但没有运气。

        <script>
        function validateName()
        {
            var x=document.forms["purchase"]["visitor"].value;
            if (x==null || x=="")
            {
                alert("Visitor name must be entered");
                return false;
            }
        }

        function name()
        {  
            document.getElementById('qty').value = "";
        }
    </script>
</head>

<body>

    <h1>Items Available</h1>

    <form id="purchase" name="purchase" action="confirm.php" method="post" onsubmit="return validateName()">
        <table>

            <h3>Visitor Name: <input type='text' name='visitor'></h3>
            <tr><th></th><th></th><th></th><th>Price</th><th>QTY</th></tr>

            <?php
            if (!($data = file('items.txt'))) {
                echo 'ERROR: Failed to open file! </body></html>';
                exit;
            }
            foreach ($data as $thedata) {

                list($partno, $name, $description, $price, $image) = explode('|', $thedata);
                echo "<tr><td><img src='$image' width='60' height='60' alt='image'></td><td><h3>$name</h3></td><td>&nbsp;&nbsp;&nbsp;&nbsp;$description</td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;<b>&pound;$price</b></td><td><input type='text' id='qty' name='$partno' size='1' value='0'></td></tr>";
                //<input type='text' size='1' name='partno_qty' value='1'</td>
            }
            ?> 

        </table>

        <input type="submit" value="Purchase">
        <input type="reset" value="Clear">

    </form>

Answer 1

将onclick或onfocus处理程序添加到“input name = qty”标记，或者使用“占位符”属性，这可能在您必须支持的某些浏览器中不起作用：

foreach ($data as $thedata)
{
    list($partno, $name, $description, $price, $image) = explode('|', $thedata);
                echo '<tr><td><img src="' . $image . '" width="60" height="60" alt="image"></td>'
                . '<td><h3>' . $name . '</h3></td><td>&nbsp;&nbsp;&nbsp;&nbsp;' . $description . '</td>'
                . '<td>&nbsp;&nbsp;&nbsp;&nbsp;<b>&pound;' . $price . '</b></td>'
                . '<td><input type="text" id="part-' . $partno . '" '
                . 'name="' . $partno . '" size="1" '
                . 'value="0" onfocus="this.value=\'\';" placeholder="0"></td>'
                . '</tr>';
}

“onclick / onfocus”方法将在每次单击/输入时清除该框。如果您希望使用“名称”功能，则呼叫将更改为：

onfocus="name( this );"

并且“名称”更改为：

function name( obj )
{  
    obj.value = "";
}

Answer 2

您可以使用HTML5 placeholder和required属性：

<form>
<input type="text" placeholder="Name" required />
<input type="submit" value="submit" />
</form>

DEMO

注意：
Internet Explorer 10，Firefox，Opera，Chrome和Safari支持placeholder属性。 Internet Explorer 10，Firefox，Opera和Chrome支持required标记。 Safari中不支持它

或者你可以在JS中这样做：

<input type="text" onfocus="inputFocus(this, 'initial text')" onblur="inputBlur(this, 'initial text')" value="initial text" />

'initial text'是页面加载时文本输入的默认值，例如（'你的名字'）。

function inputFocus(elm, placeholder){
    if (elm.value == placeholder){ elm.value = "" }

}

function inputBlur(elm, placeholder){
    if (elm.value == "" || elm.value == placeholder){
        elm.style.border = "1px solid red";
        elm.value = placeholder;
        alert("Visitor name must be entered");
    }else{
        elm.style.border = "1px solid green";
    }
}

DEMO

清除文本框

2 个答案: