如何在jquery mobile中动态更改Input字段的边框颜色

时间:2013-07-27 10:45:37

标签: html jquery-mobile cordova-2.0.0

我有一个输入字段,我想在其中提供验证,我要更改占位符文本及其颜色,但我还想更改输入字段边框的颜色。 这是html的代码:

<input class="validate[required,custom[onlyLetterSp]] text-input" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10" required>
    <input class="validate[required,custom[onlyLetterSp]] text-input" id="last_name" name="LastName" type="text" placeholder="Last Name" required>

这是用于验证和更改占位符颜色的javascript代码:

var defaultColor = 'BBBBBB';
var styleContent = 'input:-moz-placeholder {color: #' + defaultColor + ';} input::-webkit-input-placeholder {color: #' + defaultColor + ';}';
var styleBlock = '<style id="placeholder-style">' + styleContent + '</style>';
var randomColor='ff0000';
    // generate new styles and append to the placeholder style block
    styleContent = 'input:-moz-placeholder {color: #' + randomColor + ';} input::-webkit-input-placeholder {color: #' + randomColor + ';}'
     var colorchng='<style id="placeholder-style">' + styleContent + '</style>';
     if(first_name=="" || first_name=="First Name"){

        $("#first_name").append(colorchng);
        $("#first_name").attr("placeholder","First Name can not be blank");
    } if(last_name=="" || last_name=="Last Name"){
         $("#last_name").append(colorchng);
        $("#last_name").attr("placeholder","Last Name can not be blank");
    }else{
            alert("Data Entered");
    }

1 个答案:

答案 0 :(得分:8)

实施这个:

工作示例:http://jsfiddle.net/Gajotres/PMrDn/53/

HTML:

<input class="validate[required,custom[onlyLetterSp]] text-input" id="first_name" name="firstName" type="text" placeholder="First Name" maxlength="10"/>

使用Javascript:

$('#first_name').parent().css('border-color','red');